SVG Icons to Open Multiple Galleries On One Page

  • Resolved henza

    (@henza)


    8 years ago

    Hi there!
    I have a page with multiple SVG logos (using ‘SVG Support’ plugin), and I wish to open a FancyBox gallery for each. So for example if one of the brand logos was ‘Apple Computers’ then clicking on it would open a FancyBox gallery of latest product shots.
    I tried using the ‘Can I use ONE thumbnail to open a complete gallery?’ instructions in the FAQ but didn’t have any luck; even with trying to get a single gallery working!
    If this is possible any help would be much appreciated.
    Cheers,
    Henry

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter henza

    (@henza)

    Okay, I figured out how to get it to work with individual image links:

    <a href="image-b1-1.jpg" rel="brand-1"><img src="brand-1.svg" /></a>
<a href="image-b2-1.jpg" rel="brand-2"><img src="brand-2.svg" /></a>

<div class="fancybox-hidden">
   <a href="image-b1-2.jpg" rel="brand-1"><img src="image-b1-2-150x150.jpg" /></a>
   <a href="image-b1-3.jpg" rel="brand-1"><img src="image-b1-3-150x150.jpg" /></a>
   <a href="image-b2-2.jpg" rel="brand-2"><img src="image-b1-2-150x150.jpg" /></a>
   <a href="image-b2-3.jpg" rel="brand-2"><img src="image-b1-3-150x150.jpg" /></a>
</div>

    Is it possible to refactor this to use WP galleries instead? Something like:

    <a href="image-b1-1.jpg" rel="brand-1"><img src="brand-1.svg" /></a>
<a href="image-b2-1.jpg" rel="brand-2"><img src="brand-2.svg" /></a>

<div class="fancybox-hidden">
[gallery link="file" rel="brand-1" ids="150,151,152"]
[gallery link="file" rel="brand-2" ids="153,154,155"]
</div>

    Thanks again.

    • This reply was modified 8 years ago by henza.
    • This reply was modified 8 years ago by henza. Reason: added second brand & removed cruft for clarity

    Hi, I suppose you have already tried that and it did not work? That is probably because the “rel” parameter in the gallery shortcode is ignored and the image links in these galleries will not get the rel attribute as you need them to correspond with those visible ones.

    Here is a work-around:

    1. Go to Settings > Media and set the FancyBox option “Auto-gallery” to “WordPress galleries”. This will cause the plugin to try and detect separate wordpress galleries and give their media links subsequent rel attributes. These rel attributes will look like rel="gallery-1", rel="gallery-2" and so on in order of appearance (visible or not) of each gallery on the page.

    2. Go back to the page editor and change the rel attribute value for that first visible image to “gallery-1” and the second to “gallery-2”. Then remove the rel parameter for the shortcodes to make sure it won’t break the day that WordPress does start excepting rel parameter.

    Save and check the front end.

    Thread Starter henza

    (@henza)

    Thanks! That worked. One thing I did notice though is that the galleries numbering don’t align with the media rel tags. ie. The gallery div with id="gallery-1" will contain links with rel="gallery-0". Not sure if this is a bug or just a glitch on my site.

    Anyway, I am off to purchase the pro version as a show of support! Keep up the great work, and thanks again.

    Yes you are right, the automatic numbering starts at 0, not at 1 … forgot about that :/

    Good to hear you figured that out and made it work! And thanks for your purchase ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘SVG Icons to Open Multiple Galleries On One Page’ is closed to new replies.