Docs

[strobley]

Hi Themeco,

Is the Responsive Lightbox still supported in X 4.4.2 and can it be added with CS 1.2.4? http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/

I’ve followed the walk through here – https://community.theme.co/kb/shortcode-walkthrough-lightbox/

— In Firefox 46.0.1 / Mac OS 10.0.5 —
I tried using the Text Element in CS and using the x-shortcodes Media > Images – however when I press insert shortcode the shortcode it not inserted?

Also when using the CS Block Grid it is no longer clear how to add the lightbox and the again using the x-shortcodes Media > Images does not insert the short code.

— The above seems work in Chrome, so maybe a problem with Firefox only.

So, the lightbox can be added, though as a process flow to add it does not feel very natural/easy to do so. Maybe something to look at? 🙂

Many thanks.

[Lely]

Hello There,

Would you mind giving us access on a private reply so we can see the issue?

For the image lightbox we can add this on Text element:

[image class="my-lightbox" src="http://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="http://yourdomain.com/image.jpg" title="Example Image"] 
[lightbox selector=".my-lightbox" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]

This link might help:http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/

[strobley]

Hi Lely,

I just retried on Firefox and it is inserting the shortcode now so was probably a problem with my computer yesterday.

The url you sent me is the exact same as the one I provided in this thread.

I would say again it is not very straight forward to add a lightbox… for example when I add a Blockgrid in CS the [lightbox] needs to be manually added, and it is not clear if the lightbox shortcode should be added to every Block Item in the Block Grid, or just the one.

Also, In the CS Text Element and Block Item when going to x-shortcodes Media > Images; it indicates the lightbox will be used. However using x-shortcodes Media > Images generates the newer [x-image] shortcode. This does not seem to be compatible with [lightbox] shortcode and [x-image] needs to changed to [image].

It is not very intuitive and I would suggest improving the usability, documentation or code for lightbox to help others who wish to use.

Thanks again.

[Rad]

Hi there,

Would you mind providing more information about the incompatibility between [lightbox] and [x_image]? [x_image] is the same as [image], which is also the same for [cs_image]. They will just generate the image, and the only connection with the image to lightbox is a selector. The image doesn’t have any script or coding that can cause incompatibility to lightbox.

Lightbox should be declared as minimal as possible. If you’re trying to apply lightbox to a group of images (images that has same selectors), then it only needs one [lightbox]. If you have two images with two different selectors, then you need one [lightbox] for each ( hence, 2 [lightbox] ).

The selector is what attach your image to the lightbox, use it according to your preference. Group it, or make it unique for each image is up to you.

And as a goog practice, only add your [lightbox] instances in one location, maybe 1 text element at the very bottom of the content.

Thanks!

[strobley]

Hi Rad,

Thanks for the info – I played with the settings and think I understand the issue – to use lightbox I believe link=”true” must be set when using [image] [x_image] or [cs_image] is that correct?

If so, it is not clear this is required when inserting the shortcode from x-shortcodes > Media > Images the examplation of Link is:

Link
Select to wrap your image in an anchor tag.

Whereas the explanation of Href which make reference to the lightbox states to also place the image URL inside the Href. However without ticking Link the lightbox will not work:

Href
Enter in the URL you want your image to link to. If using this image for a lightbox, enter the URL of your media here (e.g. YouTube embed URL, et cetera). Leave this field blank if you want to link to the image uploaded to the “Src” for your lightbox.

As I said it is just not very clear – maybe update the explanation of Link in the x-shortcode editor to make clear it should be ticked to use the lightbox?

Thanks for explaining how to use multiple lightboxes and declaring them all is one location. The best practice makes sense. Again as said, it does work but not very intuitive to get get working. Maybe its just a case of updating the documentation to explain this best practice and that link=true is required.

Thanks again.

[Rue Nel]

Hello There,

Thanks for the updates! We certainly appreciate the feedback! This is something we can improve in our documentation. This way it can be taken into consideration for future development. I will be forwarding your feedback to the person in charge in adding/editing our knowledge base.

Thanks!

[Author]

Posts