Fancybox gallery with images in different places <p>I have a (html) page with an image gallery (all images together) and one separate image.</p> <p>I put all the images from the image gallery in a</p> <pre><code>&lt;div id="imageGallery"&gt; </code></pre> <p>I put the separate image in a</p> <pre><code>&lt;div id="separateImage"&gt; </code></pre> <p>and I have javascript</p> <pre><code>$('#imageGallery a').fancybox(); $('#separateImage a').fancybox(); </code></pre> <p>Fancybox works fine on both, the image gallery and the separate image. I can cycle through the image gallery, however, the separate image is not part of the cycle. How can I make it so that it cycles through all the images: those from the image gallery and the separate image?</p> <p>I tried adding</p> <pre><code>rel="gallery" </code></pre> <p>to the anchors as explained at <a href="https://www.inkling.com/read/javascript-jquery-david-sawyer-mcfarland-2nd/chapter-7/advanced-gallery-with-jquery" rel="nofollow">https://www.inkling.com/read/javascript-jquery-david-sawyer-mcfarland-2nd/chapter-7/advanced-gallery-with-jquery</a></p> <p>but apparently this only works if all images are in the same div (id)!?</p>