Lightbox and Multiple Images (Want to use an image set)

[Mary]

Hello,

I’ve spent the last several days moving my eStore over to the WP eStore plugin and things are going pretty well, but I’m having one sizable problem.

I sell digital scrapbooking supplies and I’m using the Lightbox feature to show multiple images of each product. There are as many as 12 images for each product.

The problem I’m having is that the lightbox images for each individual product shows images for all of the products on the page.

So, for example, say that there’s a page with two products on it. There are 12 images related to the first product and 2 images related to the second product. If you click on the first product to bring up the lightbox images for that product, the lightbox text will say ‘1 of 14 images’ (when it should be referencing just the 12 images related to that particular product) and you will be able to use the ‘Next’ button to cycle through all 14 images – again, both the images related to the current product and the next one.

Can anyone help me fix this, please? Unfortunately, this is big problem for me. As it is right now, if this is the way the software works, I can’t use it because it implies to customers that they’ll be receiving products that they won’t be.

Any help please?

Thanks-

-Mary

[Mary]

Hi, it’s me again.

I think I know, at least in theory, how to solve my problem here, but I don’t know how to implement it. I’m don’t know php at all, so I’m hoping someone can help me with that part…

The change that I think I need is to add a modifier in brackets to the rel=”lightbox” part of the programming. So, all of the images that belong to product #1 would all have the same modifier added to this programing (i.e. rel=”lightbox[product1]”) and all the images for the second product would have a different modifier added to them (i.e. rel=”lightbox[product2]”).

So, I can’t seem to figure out how to implement this in the programing. Again, I know nothing about php. But , this is what I’ve tried and it didn’t work. I tried to change the programming to add the product name in brackets to the rel=”lightbox” line. I did this by editing the ‘eStore_button_display_helper.php’ file. Here are the before and after lines of code, starting at line 17:

Before:

else

{

$output .= ‘<div class=”eStore-thumbnail”>’;

$output .= ‘thumbnail_url.'” rel=”lightbox” title=”‘.$ret_product->name.'”><img class=”thumb-image” src=”‘.$thumb_img.'” alt=”‘.$ret_product->name.'” />‘;

$output .= ‘</div>’;

if(!empty($ret_product->additional_images))

{

$product_images = explode(‘,’,$ret_product->additional_images);

foreach ($product_images as $image)

{

$output .= ‘name.'”>‘;

}

}

}

After:

else

{

$output .= ‘<div class=”eStore-thumbnail”>’;

$output .= ‘thumbnail_url.'” rel=”lightbox” title=”‘.$ret_product->name.'”><img class=”thumb-image” src=”‘.$thumb_img.'” alt=”‘.$ret_product->name.'” />‘;

$output .= ‘</div>’;

if(!empty($ret_product->additional_images))

{

$product_images = explode(‘,’,$ret_product->additional_images);

foreach ($product_images as $image)

{

$output .= ‘name.’]” title=”‘.$ret_product->name.'”>‘;

}

}

}

So, basically I changed rel=”lightbox” to rel=”lightbox”

But, no change iin the way the lightbox is working. Any thoughts?

Thanks again-

-Mary

[amin007]

I understand your requirement. The lightbox library that I use in eStore is a very lightweith version (I use this for better performance) and doesn’t have the option of grouping images by image sets which is what you need. But there is a tweak that I can give you so you get what you are after.

1. First turn off the lightbox option from eStore’s settings menu (uncheck the “Enable Lightbox effect on Images” field)

2. Install the lightbox2 plugin from here:

http://wordpress.org/extend/plugins/lightbox-2/

3. Open the “wp_eStore_style.css” file and add the following CSS to this file:

.additional_images_1{

overflow:hidden;

width:0px;

height:0px;

}

4. Finally, modify the existing lightbox image display code. Find the following in the “eStore_button_display_helper.php” file:

else

{

$output .= '<div class="eStore-thumbnail">';

$output .= '<a href="'.$ret_product->thumbnail_url.'" rel="lightbox" title="'.$ret_product->name.'"><img class="thumb-image" src="'.$thumb_img.'" alt="'.$ret_product->name.'" /></a>';

$output .= '</div>';

if(!empty($ret_product->additional_images))

{

$product_images = explode(',',$ret_product->additional_images);

foreach ($product_images as $image)

{

$output .= '<a href="'.trim($image).'" rel="lightbox" title="'.$ret_product->name.'"></a>';

}

}

}

Once you find it replace it with the following (this mainly adds the image set option per product):

else

{

$output .= '<div class="eStore-thumbnail">';

$output .= '<a href="'.$ret_product->thumbnail_url.'" rel="lightbox['.$ret_product->name.']" title="'.$ret_product->name.'"><img class="thumb-image" src="'.$thumb_img.'" alt="'.$ret_product->name.'" /></a>';

$output .= '</div>';

if(!empty($ret_product->additional_images))

{

$product_images = explode(',',$ret_product->additional_images);

foreach ($product_images as $image)

{

$output .= '<div class="additional_images_1">';

$output .= '<a href="'.trim($image).'" rel="lightbox['.$ret_product->name.']" title="'.$ret_product->name.'"><img src="'.trim($image).'" alt="'.$ret_product->name.'" /></a>';

$output .= '</div>';

}

}

}

Let me know if that helps.

[Mary]

Hi amin007,

Thank you so much for the reply.

Unfortunately, it didn’t work for me. Now, when I click on the thumbnail, the first image opens in the lightbox, but only the first image. There is no ‘image 1 of 12’ or anything like that and there is no ‘Next’ or ‘Previous’ buttons anywhere. So, there’s no way to see the additional images for the product.

Maybe this is a stupid observation, but I noticed this when I tried my own programming too. The changes in programming done on the eStore_button_display_helper.php file seem to have absolutely no effect on anything. The coding that you gave me above (and that I used) is alot like the coding that I tried to use – you’re adding the image set option (or group I guess in my case) to the ‘rel=”lightbox”‘ coding. But, as with my coding, I don’t see any change in the resulting HTML coding for the page. The html for the page still just shows ‘rel=”lightbox”‘ with no modifier. Maybe that doesn’t help, but I thought that I would mention it.

If it helps, here’s a link to my product page:

http://scrappydigits.com/products-page/

Thanks again for all of your help!

-Mary

[amin007]

Thank you for the link. Looks like you are using the extra eStore shortcodes plugin so we need to modify that plugin too. We mainly need to apply step 4 explained in the previous post to this plugin too.

Please open the “eStore_extra_product_display_helper.php” file from the extra eStore shortcodes plugin and find the following code:

else

{

$output .= '<div id="lightbox"><a href="'.$ret_product->thumbnail_url.'" rel="lightbox" title="'.$ret_product->name.'"><img src="'.$thumb_img.'" alt="'.$ret_product->name.'" /></a></div>';

if(!empty($ret_product->additional_images))

{

$product_images = explode(',',$ret_product->additional_images);

foreach ($product_images as $image)

{

$output .= '<a href="'.trim($image).'" rel="lightbox" title="'.$ret_product->name.'"></a>';

}

}

}

Once you find it replace it with the following:

else

{

$output .= '<div id="lightbox"><a href="'.$ret_product->thumbnail_url.'" rel="lightbox['.$ret_product->name.']" title="'.$ret_product->name.'"><img src="'.$thumb_img.'" alt="'.$ret_product->name.'" /></a></div>';

if(!empty($ret_product->additional_images))

{

$product_images = explode(',',$ret_product->additional_images);

foreach ($product_images as $image)

{

$output .= '<div class="additional_images_1">';

$output .= '<a href="'.trim($image).'" rel="lightbox['.$ret_product->name.']" title="'.$ret_product->name.'"><img src="'.trim($image).'" alt="'.$ret_product->name.'" /></a>';

$output .= '</div>';

}

}

}

Let me know how this goes.

[Mary]

Thank you so much! It’s working perfectly! Just how I wanted it!

You’re the best!

Thanks again!

-Mary

[marizs23]

The lightbox2 plugin needs a slight tweak to work with ssl/https. In lightbox2.php, I changed WP_PLUGIN_URL to plugins_url() on line 23. Without the change, it hardcoded all of its scripts and stylesheets with http://, causing a partial encryption error. It works great now.

[Netjera]

It should also be noted that you can’t put the additional images code “just anywhere” in the “wp_eStore_style.css” file. Since I’m entirely new to this, I tried to put it in at the top and what I got was all my thumbnails shown on the main product listing, lol. For noobs like me, that code has to go at the end of the section regarding the lightbox, in order to work. (Or at least, that’s where I put it the second time and it worked, so I’m not messing with it, lol.)

[jessica_d]

Thank you for this solution, Amin! I was having the same problem as Mary. It’s working beautifully now.

[admin]

I have made some modification to the lightbox library used by eStore so it allows image set by default. eStore will work with image set on a per product basis by default. I will update the extra eStore shortcode plugin soon so that plugin also uses the same option.

[Rodge]

Hi there Admin

How far away in time is the updated on “the extra eStore shortcode plugin”?

I’m using the fancy 10 with multiple images, and get the problem with images from all products on the page. if i try fancy 2 and turn the “extra eStore shortcode plugin” off, then fancy 2 works well with only showing the artickle images. But then i don’t show the multiple images as thumps to the customers… I’d like to use fancy 10…

If it’s near I’ll wait, if not I’ll have to stumple in to the php jungle and try your solution above…

Thanks in advance!

Have a nice day!

[admin]

Just finished adding this. Please download a new build of the extra eStore shortcodes plugin and check it out.

[Rodge]

Hi again Admin!

Thank you so much for your fast reply and update (that’s service!), the extra shortcode plug works perfect now with fancy 10 and the images!

Have a nice day!

// Rodge

[Ivy]

I am glad we got this working for you.

[inesrodrigues]

Hello.

I was having the same problem, however i have found out that the solution was just as simple as this:

Uncheck both the following options in your WP eStore Settings

– Enable Lightbox effect on Images

– Enable Smart Thumbnail Option

And then use Lightbox Plus plugin.

NO CODE NEEDED.

[Author]

Posts