Add multiple images using WP Lightbox Ultimate

[petemoore]

Hi,

I have purchased and am trying to use WP Lightbox Ultimate on a WP site that also has WP eStore installed.

I have created individual wp product pages and want to add a lightbox to those pages.

I am trying to show multiple images in a lightbox by clicking a link but can’t find a tutorial/ video anywhere on how to do this.

So to be clear I want the visitor to click a “View More Images” link and a lightbox to appear with other images navigated by a next/ previous link in the lightbox.

I can get one image to show using your shortcode:

[wp_lightbox_prettyPhoto_anchor_text_image link=”http://www.example.com/overlay-image.jpg”

text=”Click here to open the image” description=”Image description goes here”]

But how do tell it to use other images as well?

Thanks

[wpCommerce]

Hi, please have a look at the

Display Image/Video Gallery with prettyPhoto section of the shortcode reference guide:

http://www.tipsandtricks-hq.com/wp-affiliate-link-manager/wp-content/uploads/wp-lightbox-stuff/docs/wp-lightbox-ultimate-shortcodes-by-library-type.pdf

[petemoore]

Hi,

Thanks for the reply.

I had a look and tried it out, doing it that way adds 1 link per image.

So if I have 3 images it would show 3 links.

I want 1 link to bring up the lightbox but be able to view the other 2 images.

Is there a way of achieving that?

Thanks

Pete

[wpCommerce]

Hi, Just use the same gallery_group name for the three images. You will be able to view one image at a time. But there will be a navigation arrow (prev/next) to view other images (who have the same group name) in the same window.

Please also post a link to the page so I can see if you are doing anything wrong.

[petemoore]

Hi,

I have added the following code but it shows 3 separate links as I would expect it too:

[wp_lightbox_prettyPhoto_anchor_text_image link=”http://bustleandsew.co.uk/images/products/lightbox/issue12a.jpg” text=”View More Images” gallery_group=”magazineissue12″][wp_lightbox_prettyPhoto_anchor_text_image link=”http://bustleandsew.co.uk/images/products/lightbox/issue12b.jpg” text=”View More Images” gallery_group=”magazineissue12″][wp_lightbox_prettyPhoto_anchor_text_image link=”http://bustleandsew.co.uk/images/products/lightbox/issue12c.jpg” text=”View More Images” gallery_group=”magazineissue12″]

Here is the page:

http://bustleandsew.co.uk/store/publications/issue-twelve-january-2012/

I want to show just one link but show the 3 images in the lightbox.

Thanks

Pete

[wpCommerce]

So you don’t want two other links to show on that page?

You can try hiding the two images but I’m not sure if that will work though. First, pass a class parameter (css class name) through the shortcode. For example:

[wp_lightbox_prettyPhoto_anchor_text_image link="http://bustleandsew.co.uk/images/products/lightbox/issue12b.jpg" text="View More Images" gallery_group="magazineissue12" class="my_hidden_block"]

[wp_lightbox_prettyPhoto_anchor_text_image link="http://bustleandsew.co.uk/images/products/lightbox/issue12c.jpg" text="View More Images" gallery_group="magazineissue12" class="my_hidden_block"]

Now open the wp_lightbox_ultimate_custom.css file (It’s in the root directory of the plugin) and add your class to it. For example:

.my_hidden_block

{

display: none;

}

Let me know how it goes.

[petemoore]

Hi,

Sorry i’ve been off work so just getting back to this.

I’m not sure why you would want 3 separate links.

I thought there would be an easier way than that. It would be ok for me but my client isn’t technical so for her to have keep adding the class for any extra images after the first will be too much for her.

Thanks

Pete

[wpCommerce]

Hi, first of all, whatever you are trying to do is not how the shortcode works. If you want to display multiple images in the overlay window you need to use multiple shortcodes linked to each of these images. Most importantly, they need to be embedded in the page via anchor texts or images (which is visible).

From your last thread it seems that you want to display multiple images in overlay but you don’t want to show their anchors. Unfortunately, you can’t just use one shortcode to display multiple images. So I gave you a quick workaround, which is to hide the rest of the anchors except one.

All you need to do is just include that css class once in our plugin’s custom stylesheet and pass the class name through each shortcode anchor you want to hide. That’s the easiest way we can offer for now.

1. The usual way (even harder) to do this would be – write your css class, include it in your own stylesheet (.css file), include that stylesheet when the page loads, create a new div with that class name and wrap the shortcode you want to hide(e.g. <div class=”my_hidden_block”>shortcode</div>).

2. Another way to do this would be – simply use the inline css to hide each shortcode (too much manual work). For example:

shortcode1 (not hidden)

<div style="display:none;">shortcode2</div>

<div style="display:none;">shortcode3</div>

<div style="display:none;">shortcode4</div>

...........................................

...........................................

[Author]

Posts