Fancybox should support "Inline Gallery", not only "Image Gallery"

[baszero]

Like Image Galleries, Fancybox should support galleries consisting of only Inline Elements.

Code Example (which currently does not work):

<script>
  $(document).ready(function() {
    $('a#inlinetest').fancybox({
        'type':'inline',
        'overlayShow': true,
        'overlayOpacity': 0.7,
        'overlayColor': '#666',
        'overlayColor': '#666',
        'showNavArrows': true,
        'titleShow': false
    });
  });
</script>
<div>
  <a id="inlinetest" rel="group1" href="#inlinedata">Click here</a>
  <div style="display:none;">
    <div id="inlinedata">
      <div>HTML INLINE 1</div>
    </div>
    <div id="inlinedata">
      <div>HTML INLINE 2</div>
    </div>
  </div>
</div>

Thanks!

[baszero]

Code Example:

<script>
  $(document).ready(function() {
    $('a#inlinetest').fancybox({
        'type':'inline',
        'overlayShow': true,
        'overlayOpacity': 0.7,
        'overlayColor': '#666',
        'overlayColor': '#666',
        'showNavArrows': true,
        'titleShow': false
    });
  });
</script>
<div>
  <a id="inlinetest" rel="group1" href="#inlinedata">Click here</a>
  <div style="display:none;">
    <div id="inlinedata">
      <div>HTML INLINE 1</div>
    </div>
    <div id="inlinedata">
      <div>HTML INLINE 2</div>
    </div>
  </div>
</div>

[fancyapps]

You are using the same ID`s, use classnames.

[baszero]

I need same IDs or classnames, as I want all inline elements in one gallery.

An example like http://fancyapps.com/fancybox/#examples would be great, which uses inline instead of images.

[fancyapps]

Then you have to open fancyBox manually, like this - http://jsfiddle.net/VZd7c/

[baszero]

Awesome. Many thanks! I would add this fiddle to your demo / examples page, will surely help many others too. Thanks again!

[baszero]

Assumption: If you have let's say 100 inline elements that you want to show within a single gallery, and each inline element has an image, the browser will prefetch ALL images, even without flipping through the gallery...

I will develop a version, where images are only loaded when fancybox is showing that element. I assume that there are events where I can hook in my jQuery functions...

[fancyapps]

Actually, it is basically the same example as no. 11 from http://fancyapps.com/fancybox/#useful And if you not want to display all images at once, you could, for example, build JS array yourself, e.g., var myarr = [{href: ''}, {href:''}]; and then use it like $.fancybox.open(myarr, {index: some_number}); or maybe you could create your own solution, it is up to you.

[scriptonian]

Hello i was wondering if you could help me solve a similar issue. I noticed that by using the inline method, all my images (fullsized) are being downloaded as well on pageload (not good). what i did was remove all the image tags within my div and inject them only when the image in clicked. It works however it doesnt work properly. when you hit the NEXT button the image is not injected, because it wasnt an anchor click :-( also when you scroll down, its supposed to show the next image but the images are not injected as well. because it wasnt an anchor click. how do fix this? perhaps there is some kind of next event handler. But how do i use that?

[mattiassey]

Hey, so if I have a dynamically generated set of thumbnails that belong to the same gallery and want to open them in a fancybox along with custom html, essentially metadata for each individual image, what is the best approach?

I tried with the inline method, but failed at bringing the inline elements into the same gallery, whereas doing the same with the images worked fine. I see that fiddle, but I didn't get it to work, and I don't know if it's quite what I need. (I also got an error saying TypeError: undefined is not a function (evaluating '$('a#inlinetest')') )

[mattiassey]

Sorry, solved it. It DID work, it just kept on showing the same inline content before I added a counter...