Image linked to a gallery

[Silvia Paganino]

I’m sorry, I have a really stupid question, but I’m not able to fix this problem even after reading your FAQ page and forum…
I need to set up my page with one image linked to a gallery (I’d love to use the WordPress built in to avoid other plugins as NextGen, which generates conflicts with other plugins). I want the gallery to be opened as a lightbox one with your plugin.
I have the ref of the gallery, for example

but I don’t know how to use it, where to put it and how to set all other fields. I don’t understand anything about JQuery and all those “strange” to me things are mentioned in the forum. I’m hopeless for sure… 😀 😀 😀
Would you be so kind to help me before this problem drives me crazy?
Thank you so much, have a nice weekend!

Silvia

[RavanH]

Hi Silvia, no problem. That’s what Premium support is for 🙂

OK, i’ll give you a step-by-step based on the gallery shortcode you gave above:

1. Remove the size=”full” from the shortcode to prevent full size images loading on the first page request.

2. Then (supposing you want three images in the gallery) remove the first image ID from the ids=”…” parameter.

Your shortcode should now look like

3. Switch to the editors Text tab (if you’re not already using that) and wrap your shortcode in a div with class “fancybox-hidden” so it will now look like:

<div class="fancybox-hidden">

</div>

The code snippet should start on a new line.

4. Now place you cursor above that div code (add another new line if needed) and then click the “Add media” button. Browse to the image that corresponds with the ID that was removed in step 2. Insert that image (choose large size if you want) and make it “Link to: Media file” same as you already did for the gallery.

5. Save your post or page and go to Settings > Media to make sure the Auto-gallery option is enabled.

Easiest would be the setting “All in one gallery” at step 5 here but if you need to have more control, the advanced “Galleries per Section” might be needed. How to configure that, depends on your theme so please let me know if you want help with that 🙂

[Silvia Paganino]

Hi Ravan and thank you very much for your patient and prompt reply.
I did everything as you described, but it still doesn’t work… If in “Gallery option: Autogallery” I leave
– All in one gallery: lightbox will show all the images, it doesn’t matter which ones you chose before
– Galleries per section: only the first image will be shown in a lightbox
I need to set up galleries with just 2 or 3 pics, which have to be linked to every images I put in the page and I think I need to use Gallery per section, so that your kind help would be very appreciated…
I’m really sorry to disturb you again…
Thank you so much!

Silvia

[RavanH]

OK, so you I suppose have multiple galleries on one page and you want each gallery to remain separate from the others when browsing in the lightbox? In that case you do indeed need to use the “Galleries per section” setting but all will now depend on what you have defined in the Section(s) field… If you have .gallery there for example, only images that are inside one WordPress gallery will be bundled but that does NOT include that single image that you had to place outside each gallery code to make a visible linked image.

So what I propose are these further steps:

6. After setting Autogallery to “Galleries per Section” find the Section(s) field not far below it. Change that to .fancybox-gallery (the dot in front is important!)

7. Now back to your page, switch the the Text tab again and wrap each part that should be grouped into one lightbox gallery in a div with class “fancybox-gallery” (no dot there!) so each section looks similar to this example:

<div class="fancybox-gallery">
<a href="http://..." class="..."><img src="..." alt="..." /></a>
<div class="fancybox-hidden">
 
 
 
      
 
  
 
      
 
  
  
 
 
      
 
      
 
  
 
      
 
  
  
</div>
</div>

Note that it might look a bit different depending on how you’ve inserted the visible image.

If it still does not work like you want it too, please provide a link to the page where you are trying to set this up so I can see what more we need to do. You can use the contact page (top menu) if you do not want to share the URL publicly 🙂

[Silvia Paganino]

Thank you so much, it perfectly works!
Thank you for your patience and kindness, but don’t think you’re safe now… I’ll find something else for sure in order to disturb you again!
THANK YOU!

[RavanH]

No problem Silvia, it’s a pleasure to help you and I look forward to helping you again 🙂

[Silvia Paganino]

Hi, Ravan!

As I promised… I’m back… 😀 😀 😀
At this time I need to set the lightbox in order to avoid the border. Is it possible just to have the picture opened in a lightbox without any border? If I set the border to 0, I still see the shadow all around the pic.
Thank you so much, have a nice week end!

Silvia

[RavanH]

Hi Silvia,

Removing drop shadow is planned as an option but not there yet. For now, you whould be able to get rid of the shadows with the following style rules:

#fancybox-bg-n, #fancybox-bg-ne, #fancybox-bg-e, #fancybox-bg-se, #fancybox-bg-s, #fancybox-bg-sw, #fancybox-bg-w, #fancybox-bg-nw {
  background-image: none !important;
}
#fancybox-outer {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

You can add these rules to your themes style.css if you’re using your own custom theme (if not, then better not modify theme files because your modifications will get lost on the next update) or you can use the plugin Jetpack and activate the Custom CSS module. That will create a new Appearance > Edit CSS admin page where you can insert the above rules.

Hope that helps 🙂

[Silvia Paganino]

Hi Ravan!

Sorry, I know, it’s Sunday also for you… Don’t hate me, please…
You gave me the code above in order to get rid of the drop shadow from your lightbox and it worked… Until this morning… I checked and pasted again directly from your message the code you gave me even if I knew that I didn’t make any change since I wrote it for the first time months ago, but… Nothing. It stops working…
I installed WP Super Cache and ShortPixel Image Optimizer plugins last week, but this problem arise only this morning anyway…
Sorry for disturbing you again, Ravan… Have a nice Sunday!

Silvia

[RavanH]

Hi Silvia, no problem 🙂

It might be there is other CSS interfering but that’s hard to tell without seeing it live… Can you share a link to your site? If you don’t want to share that publicly on this forum, you can use the contact form on https://premium.status301.net/contact/

[Silvia Paganino]

Thank you, Ravan! It works and it looks very nice and clean now!
THANK YOU!!!

Have a nice Sunday!

Silvia

[Simone Zagagnoni]

Hello RavanH,

I’m trying this your guide but I can not in any way to run the gallery.
With your code with DIV even I bust me the whole page.

I have now added this code:

<a href="http://www.bacci1925.it/wp-content/uploads/2016/02/Lardo-stagionato-in-conca-di-marmo01.jpg" rel="attachment wp-att-12283"><img class="wp-image-12284 size-full" src="http://www.bacci1925.it/wp-content/uploads/2016/02/Lardo-stagionato-in-conca-di-marmo01.jpg" alt="testa, lingua, cotenna, spezie, erbe aromatiche fresche, sale, pepe" width="900" height="601" /></a> <center><em>INGREDIENTI: testa, lingua, cotenna, spezie, erbe aromatiche fresche, sale, pepe</em></center>

<div class="fancybox-hidden">



</div>

He shows me the image I want, I click, however, it opens the fancybox shows me only a single image, and if I click on one of the arrows tells me that it is impossible to charge the following photos.

[Author]

Posts