WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
How to have thumbnails side by side? (12 posts)

  1. strawberrykoi
    Member
    Posted 3 years ago #

    When I create a thumbnail with a hidden div containing a gallery, the next thumbnail/gallery is beneath the first... it would be much for aesthetic to have them be side by side - is this possible?

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    You do not have to place the hidden div that 'belongs' to the first thumbnail right after/below it. Move it to after the second thumbnail together with the second hidden div.

  3. strawberrykoi
    Member
    Posted 3 years ago #

    But... would the thumbnail lead to the specific gallery designated to that thumbnail? I am wanting a gallery of thumbnails that lead to complete galleries continuing from that SPECIFIC thumbnail... if that makes sense?

  4. strawberrykoi
    Member
    Posted 3 years ago #

    Also... when I fixed the code as you mentioned, the gallery in the fancybox bypasses one gallery and simply skips to the next sent. As I said, I would like each thumbnail to pop up a gallery designated for THAT thumbnail. Is it possible? If not, how can I achieve this through another means Thanks so much!

    (my code, for reference)

    a href="http://www.strawberrykoi.com/wp-content/uploads/2011/06/nature_1.jpg"><img class="alignnone size-thumbnail wp-image-1191" title="nature_1" src="http://www.strawberrykoi.com/wp-content/uploads/2011/07/nature_11-300x200.jpg" alt="" width="300" height="200" /> a href="http://www.strawberrykoi.com/wp-content/uploads/2011/05/wedding_3.jpg"> <img class="alignnone size-thumbnail wp-image-1143" title="wedding_5" src="http://www.strawberrykoi.com/wp-content/uploads/2011/07/wedding_51-300x200.jpg" alt="" width="300" height="200" />
    <div class="fancybox-hidden"><img class="alignnone size-full wp-image-278" title="nature_2" src="http://www.strawberrykoi.com/wp-content/uploads/2011/06/nature_2.jpg" alt="" width="960" height="637" />
    <img class="alignnone size-full wp-image-279" title="nature_3" src="http://www.strawberrykoi.com/wp-content/uploads/2011/06/nature_3.jpg" alt="" width="960" height="640" />
    <img class="alignnone size-full wp-image-280" title="nature_4" src="http://www.strawberrykoi.com/wp-content/uploads/2011/06/nature_4.jpg" alt="" width="960" height="640" />
    <img class="alignnone size-full wp-image-281" title="nature_5" src="http://www.strawberrykoi.com/wp-content/uploads/2011/06/nature_5.jpg" alt="" width="960" height="637" /> 

    a href="http://www.strawberrykoi.com/wp-content/uploads/2011/05/wedding_4.jpg"><img class="aligncenter size-full wp-image-230" title="wedding_4" src="http://www.strawberrykoi.com/wp-content/uploads/2011/05/wedding_4.jpg" alt="" width="960" height="601" /> a href="http://www.strawberrykoi.com/wp-content/uploads/2011/05/wedding_1.jpg"><img class="aligncenter size-full wp-image-227" title="wedding_1" src="http://www.strawberrykoi.com/wp-content/uploads/2011/05/wedding_1.jpg" alt="" width="960" height="722" /> a href="http://www.strawberrykoi.com/wp-content/uploads/2011/06/wedding_51.jpg"><img class="alignnone size-full wp-image-237" title="wedding_5" src="http://www.strawberrykoi.com/wp-content/uploads/2011/06/wedding_51.jpg" alt="" width="960" height="584" />

    </div>

  5. strawberrykoi
    Member
    Posted 3 years ago #

    Anything on this? When I have all of the hidden content together, it just goes through both sets of content, no matter which thumbnail. I would like to have exclusive content PER thumbnail - is it possible??

  6. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    You will need to do two things:
    1. Disable the Auto-gallery feature in Easy FancyBox settings on the Settings > Media page;
    2. Attribute different "rel" attributes to the image links that belong to the two galleries. It does not matter what you choose as rel attribute value as long as you stick with it.

    This is a simplified example of how your the basic post source (in the HTML tab) might look like, showing two thumbnails each linking to the first image of their own gallery A and B which will only be followed by images from the hidden div belonging to the same gallery group:

    <a href="http://url.to/first-image-in-gallery-a.jpg" title="image title" class="fancybox" rel="GalleryA"><img src="http://url.to/gallery-a-thumbnail.jpg" alt="Open my Gallery A" /></a>
    
    <a href="http://url.to/first-image-in-gallery-b.jpg" title="image title" class="fancybox" rel="GalleryB"><img src="http://url.to/gallery-a-thumbnail.jpg" alt="Open my Gallery B" /></a>
    
    <div class="fancybox-hidden">
      <a href="http://url.to/first-image-in-gallery-a.jpg" title="image title" class="fancybox" rel="GalleryA"></a>
      <a href="http://url.to/first-image-in-gallery-a.jpg" title="image title" class="fancybox" rel="GalleryA"></a>
      <a href="http://url.to/first-image-in-gallery-a.jpg" title="image title" class="fancybox" rel="GalleryA"></a>
      <a href="http://url.to/first-image-in-gallery-b.jpg" title="image title" class="fancybox" rel="GalleryB"></a>
      <a href="http://url.to/first-image-in-gallery-b.jpg" title="image title" class="fancybox" rel="GalleryB"></a>
      <a href="http://url.to/first-image-in-gallery-b.jpg" title="image title" class="fancybox" rel="GalleryB"></a>
    </div>

    Notice how the rel attribute makes the difference, assigning each image to its own gallery A or B.

    This example above is for when you decide to manage your galleries manually. If you do not like the idea, you can choose to install the popular plugin NextGen Gallery. With some adjustments in the settings of that plugin as described in the Easy FancyBox FAQ's, you can use NextGen Gallery to manage your galleries and have them show FancyBox...

    Hope you can work with either (or both) of these tips :)

  7. strawberrykoi
    Member
    Posted 3 years ago #

    Wow, thanks so much! That did it perfectly :D

  8. Annie754
    Member
    Posted 3 years ago #

    I have a similar problem - I downloaded FancyBox 1.3.4 but can't get galleries who have the same "rel" tag to work. Instead of it reading one gallery in a slideshow, it shows all of the images within that page.

    What code do I need to add to my image link page in order to have multiple galleries existing within the same page, while each grouped element is shown in a slideshow by itself?

  9. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Annie, are you using a WordPress plugin or just the raw FancyBox 1.3.4 script files? I mean, what did you download exactly and from where?

  10. Annie754
    Member
    Posted 3 years ago #

    I downloaded FancyBox from the website, placed it in my plugins folder on my FTP, and activated it in WordPress. Everything is working great except that it isn't recognizing the separate "rel" tags for different image category links.

    I have it set up if you click on the text link, an image gallery slideshow will pop up. I have about six different text links on the same page with a different group of images associated with each link. I am adding the code into my php page directly.

    Here is a portion of my code. I also tried your code above and it still cycles through all of the images on the page instead of just the images associated with the link.

    cambridge

    cambridge

    providence

  11. Annie754
    Member
    Posted 3 years ago #

    `<a id="single_image" HREF="http://www.first-image-in-gallery.jpg" onMouseover="change1('pic1','image4')" >cambridge</A> <a id="inline" href="#data"></a>

    <a class="grouped_elements" rel="group1" href="http://www.first-image-in-gallery-a.jpg"></a>

    <a class="grouped_elements" rel="group1" href="second-image-in-gallery-a"></a>

    <a id="single_image" HREF="http://www.first-image-in-gallery.jpg" onMouseover="change1('pic1','image4')" >cambridge</A> <a id="inline" href="#data"></a>

    <a id="single_image" HREF="http://www.first-image-in-galleryb.jpg" onMouseover="change1('pic1','image5')" >providence</A> <a id="inline" href="#data"></a>

    <a class="grouped_elements" rel="group2" href="http://www.first-image-in-gallery-b.jpg"></a>

    <a class="grouped_elements" rel="group2" href="second-image-in-gallery-b"></a>

  12. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    I downloaded FancyBox from the website, placed it in my plugins folder on my FTP, and activated it in WordPress.

    Still not very clear but if you are using the plugin Easy FancyBox from http://wordpress.org/extend/plugins/easy-fancybox/ and you want full control over galleries via your own rel tags, you need to switch off the Auto-gallery function on your Settings > Media admin page.

    Also, do NOT use an ID tag (like id="single_image") more than ONCE on a page. Use class="fancybox" for all your links or let the plugin assign FancyBox automatically to all image links. There is an option for that too...

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic