[Leo SParticipant]

It took me a bit to understand how to get the iLightbox going. The video tutorial helped a lot so thanks for that! 🙂
I was able to get it to work with the Jetpack tiled galleries by adding a class to gallery images via jQuery (X Customizer > Custom > Javascript), then adding a lightbox to that page with the same selector.

Everything works fine but my question is: Is there another way of doing this?
Here’s the page with the jetpack gallery: http://dolcepixels.com/portfolio-archives/votu-concept-art/
Here’s a little write up I did on it: http://dolcepixels.com/wordpress/x-theme-ilightbox-and-jetpack-tiled-gallery

I’d love to have some feedback on this method. Thanks a lot.

Leo

[AlexanderKeymaster]

Nice job Leo!

I’d say that method works quite well. Your write up seems to summarize things well. There are other ways to do it, but I’d say the one you landed on was a good choice.

In case you’re interested, here’s a little more info on how the shortcode works.

If you view your page source, you’ll see this towards the header:

jQuery(document).ready(function(){jQuery('.x_lightbox').iLightBox({skin: 'light',linkId: 'gallery-image',overlay: {opacity: 0.85,blur: true},styles: {prevScale: 0.65,prevOpacity: 0.75,nextScale: 0.65,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: true}});});

That’s what the shortcode outputs to fire up the lightbox. If you wanted to do multiple galleries, you could could just include multiple shortcodes with different classes. Then you’d want to add multiple lines of your own jQuery to add those extra classes.

You could get real fancy and modify X Shortcodes to use $.each (https://api.jquery.com/each/) and trigger them one at a time, but that’s another story.

Quick disclaimer, Modifications like this are a bit outside the scope of what we can provide support for, but we’re happy to see people make X even more powerful, and suited to their needs.

Overall, nice job 🙂 Take care

[Leo SParticipant]

Thanks for the prompt feedback and the extra info! I’m really glad to see your active support in the community.
The theme is fantastic and I wish you guys nothing but success!
Cheers

Leo

[RadModerator]

Thanks Leo! A really nice job and great contribution to x community!

Good Luck!

[Stefano MParticipant]

Thank you Leo, just used your method adapting it to WordPress basic galleries, where image class involved is simply <.gallery-item a>.
Nevertheless, your method allowed me to get rid of Responsive Lightbox, an extra plugin I used to add lightbox effect.

Cool 🙂
S.

[Leo SParticipant]

Awesome! Happy to help 🙂

[AmanMember]

Sounds good Stefano!

[Megan WParticipant]

Oh my gosh! Thank you so much LEO & STEFANO! It’s so dumb that the lightbox doesn’t work on regular wordpress galleries, but since my website building knowledge is limited I really didn’t know how to get that to work.

[RadModerator]

Hi Megan,

If you’re having problem to set it up, just let us know which part is confusing and we will gladly help you 🙂

[Jens PParticipant]

Hey Leo,

I’m only wanna say: YOU ARE MY HERO FOR THE DAY with your post!!!! This is exactly what I need 🙂

Best

Jens

[Leo SParticipant]

Happy to help 🙂
Best regards

Leo

[RadModerator]

Great to hear that guys! And thank you Leo 🙂

[Jens PParticipant]

Howdy,

I need help and I hope, you will do it. At first, let me explain some functionalities from the page das-neue.friseure-vandell.de

as you see after a click in the slider to the first part of the site, called “Frisuren” (as notice: all different sqare grids which you can see are full responsive with switching font-sizes for the different viewports) you have the posibility to click on the images or the buttons to scroll eighter to the other parts on the page (“Damen” or “Herren” etc.) or some images link to a second page (as example on the first page the button/image “Extensions”. All these images got the class one-page for this and it works very well..
On the full-one-page are different parts with galleries which are implemented with the tilled gallery plugin without jetpack. Leo’s workaround for this works well.. (you can see it on the part “Herren” or “Kinder” with exapmle images)
Now I have to add a video in the part “Perücken”. I used the shortcode from your documentation for this functionality for 2 images [image src="image-2.jpg" link="true" href="//player.vimeo.com/video/84751465" lightbox_video="true"][lightbox]. (the images are implemented but the shortcode lightbox is deleted at the moment) The problem for this is, that now ALL images on the whole page open in a lightbox. That’s not really helpful, because it breaks my complete page 🙁

So I need the functionality to add different lightboxes for each part of the page. I tried to use your propose from above `If you view your page source, you’ll see this towards the header:

jQuery(document).ready(function(){jQuery(‘.x_lightbox’).iLightBox({skin: ‘light’,linkId: ‘gallery-image’,overlay: {opacity: 0.85,blur: true},styles: {prevScale: 0.65,prevOpacity: 0.75,nextScale: 0.65,nextOpacity: 0.75},path: ‘horizontal’,controls: {thumbnail: true}});});

That’s what the shortcode outputs to fire up the lightbox. If you wanted to do multiple galleries, you could could just include multiple shortcodes with different classes. Then you’d want to add multiple lines of your own jQuery to add those extra classes.`

, but my different tries are all not working… 🙁

How can I set the different lightboxes for the tilled galleries for “Männer”, “Kinder”, “Kosmetik”, the special video etc but NOT for the images which are linked to other parts on the page or link to other pages.

Best

Jens

[RadModerator]

Hi Jen,

If you will use it in a slider, it will not work. As slider tend to create duplicates of slide, thus duplicate of its elements too. Which cloned elements does not have lightbox attachment.

And upon checking, your images successfully used the lightbox, so I think your question is create a lightbox group?

Then this code should work.

jQuery(document).ready(function(){

jQuery('.x_lightbox_group_1 a[href$=".mp4"], .x_lightbox_group_1 a[href$=".webm"], .x_lightbox_group_1 a[href$=".jpg"], .x_lightbox_group_1 a[href$=".gif"], .x_lightbox_group_1 a[href$=".png"]').iLightBox({skin: 'light',linkId: 'gallery-image',overlay: {opacity: 0.85,blur: true},styles: {prevScale: 0.65,prevOpacity: 0.75,nextScale: 0.65,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: true}});

jQuery('.x_lightbox_group_2 a[href$=".mp4"], .x_lightbox_group_2 a[href$=".webm"], .x_lightbox_group_2 a[href$=".jpg"], .x_lightbox_group_2 a[href$=".gif"], .x_lightbox_group_2 a[href$=".png"]').iLightBox({skin: 'light',linkId: 'gallery-image',overlay: {opacity: 0.85,blur: true},styles: {prevScale: 0.65,prevOpacity: 0.75,nextScale: 0.65,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: true}});

jQuery('.x_lightbox_group_3 a[href$=".mp4"], .x_lightbox_group_3 a[href$=".webm"], .x_lightbox_group_3 a[href$=".jpg"], .x_lightbox_group_3 a[href$=".gif"], .x_lightbox_group_3 a[href$=".png"]').iLightBox({skin: 'light',linkId: 'gallery-image',overlay: {opacity: 0.85,blur: true},styles: {prevScale: 0.65,prevOpacity: 0.75,nextScale: 0.65,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: true}});

});

Then manually add the class x_lightbox_group_1, x_lightbox_group_2, x_lightbox_group_3 to your image links container.

Eg. <div class="x_lightbox_group_1"><a href="image.jpg"><img /></a></div>

It will ignore none-image and none-video links, though im not sure yet if will work for all kinds of video like iframe video. Video iframe lightbox may only works at Image shortcode setup. I will let you know about the video.

Is this what you’re trying to achieve?

[Jens PParticipant]

Hey Support, sorry for the delay with the answer. I tried your suggestion ( and some others), but unfortunately all doesn’t work.
As I understood, in the js you grap the links (“a”) for different datatypes (*.jpg;*gif;*.webm etc) and set these for a single lightboxgroup (…group_1 _2_etc). After this, in a textfield where I will add a SINGLE jpg, webm or gif etc it’s possible to set this for each particular lightboxgroup. I guess for the problem with the video it will be able.

But I need the functioanlity for a gallery too. Unfortunality, if we created a gallery with wordpress, we get not the single url’s for each attachment, but that: [gallery type="rectangular" link="file" ids="8963,8962,8961"]. So we have only the attachment id’s. My first step was, to set the div with the class ( like in your example). But then the image is only to see a quarter of a second 🙁
the next what I tried was to set in a group the .tiled-gallery-item a jQuery('.x_lightbox_group_1 a[href$=".mp4"], .x_lightbox_group_1 a[href$=".webm"], <strong>.x_lightbox_group_1 .tiled-gallery-item a[href$=".jpg"],</strong> .x_lightbox_group_1 a[href$=".jpg"], .x_lightbox_group_1 a[href$=".gif"], .x_lightbox_group_1 a[href$=".png"]').iLightBox({skin: 'light',linkId: 'gallery-image',overlay: {opacity: 0.85,blur: true},styles: {prevScale: 0.65,prevOpacity: 0.75,nextScale: 0.65,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: true}}); but, it doesn’t work.
then I tried to set with an simple js snippet `<script type=”text/javascript”>
$(document).ready(function(){
$(“.tiled-gallery-item a
“).attr(„class”,”x_lightbox_group_1″);
});
</script>`
directly in the post. But.. the images don’t get the additional class.

The next try was to take the lightbox js from the X-shortcode-function.php and put it with a modification for each single group (changing: x_lightbox to x_lightbox_grop_1 _2 etc..) and the changing for the selector “from x-img-link” to “tiled-gallery-item a” in the functions.php for the renew child. But also, nothing happened..

What ca I do to add the lightbox_group_… as class to each IDS in a single gallery (and I have over 10 different single galleries with different images in the page)?

🙁

Best

Jens

[Author]

Posts