I would like to use Shadowbox JS for Lightbox substitute

[acekin]

I have read several forum threads and tried the remedies recommended to have multiple images presented for one product. If I disable Shadowbox JS, or Fancybox a Lightbox presentation scheme appears, probably from your plugin, and it works. However, I cannot then use a similar product to display other images on the site. I downloaded Lightbox 2 as indicated in one of the threads but that did not work either. I tried the “Enable lightbox” checked and unchecked, Lightbox 2 simply does not display multiple images.

The page under question is:

[http://www.abrashgallerie.com/online-store/bags/]

For the fourth bag, a teal colored leather bag, there is a second image totally incongruous to make recognition easier. That is a watch. I can see the code with FireBug but it appears outside the DIV that contains the product image. So, Shadowbox seems to ignore it. As far as I know Shadowbox is a Lightbox substitute. How can I go around this problem. The built in Lightbox or similar facility does not seem to have image fitting algorithm, nor can I use it elsewhere. So I need to make things work across the site.

Thanks,

Cemal

[admin]

All the images placed by eStore has “rel=lightbox” attached to it. So whatever lightbox plugin you are using needs to look for that rel attribute. I don’t know of any way to get shadowbox working with eStore’s images.

[acekin]

Thanks, yes, Shadowbox JS looks for rel=lightbox, and it displays the first image. But does not scroll to the next image used for the same product. The way images are grouped into a set, I believe, is via rel=lightbox[gallery1] syntax where gallery1 is assigned to all the images in the set. Furthermore, the second image URL appears outside the div that contains the first image. Are these handled by eStore? How, and how can they be modified?

I have no problem of using a different presentation tool and I did try the lightbox 2 as recommended in one of the forum threads here. But that also did not scroll through the additional images. The ONLY time the second, third, … images of the same product is shown is when I disable all image handling and let your built in product handle it. In that case, I have to forgo proper image displays elsewhere on the site. Additionally, the lightbox facility you seem to have built into the product does not have the ability to properly downsize the images. There needs to be a better way. So far I do not have an answer from Tips-And-Tricks HQ. Let us try once more, shall we?

Cemal

[acekin]

I have just tried another lightbox substitute, FancyBox, that also skips over the second product image as it scrolls from product to product.

Cemal

[acekin]

Current set up uses Lightbox 2 plugin, and WP eStore “Lightbox effect” is not checked. This was the recommended setup in the thread I mentioned before. If I leave the WP eStore lightbox effect checked, they both pop up; yours will scroll through all the images, including the second, third,… images of a single product and when closed the Lightbox 2 display shows up but does not scroll through ANY of the images. Each product image (single) presented with no “Next” “Previous” buttons.

Cemal

[admin]

This post will help you with the image set:

https://support.tipsandtricks-hq.com/forums/topic/problem-with-lightbox

[acekin]

Thank you, this was helpful. To a large extent it is working, and it is working the same way with Lightbox-2 and Shadowbox JS. There is one anomaly though. In the fourth product there is a second image, the incongruous watch. It correctly displays as expected. However, the scrolling backwards shows the original bag image for this product and continues scrolling backwards to show the other products. Also, after displaying the first product image, the scrolling forward continues and stops after displaying the secondary image of the fourth product. See the page in question in the following link. The fourth item has a secondary image, a watch:

[http://www.abrashgallerie.com/online-store/bags/]

The anomaly (maybe anomalies) is:

1. The image scrolling starts on the first image and continues forward. I would have expected it to display only the image(s) of the current product item

2. If the continuous scrolling is considered normal behavior, then it should not stop after displaying the secondary image of the fourth product item but continue forward.

This behavior is identical whether I use Lightbox-2 or Shadowbox which is a Lighbox replacement. Could the code be tweaked to display the image(s) of the chosen product only? Otherwise, which image is the supplemental image of which product becomes impossible to discern.

Thank you for the pointer, I hope you can point me in the direction of another fix!

Cemal

[acekin]

By the way, could this be, please, incorporated into the actual plugin code so that future updates will not require that I make these changes every time. Furthermore, I think it adds value to the product. Please consider incorporating it.

Cemal

[acekin]

I have found the culprit of the behavior I described in the above post. The grouping is done by the product title, which is reasonable. It just happens that the previous items were also called “Leather Handbag” so they were all grouped into one. I changed the product title of the fourth bag to include a code and it now displays only two images under that title. We will add product codes to separate them.

My request for this feature to be incorporated remains though!

Thanks for the help. Our problem is solved.

Cemal

[acekin]

I am experiencing the same problem on another site where I am deploying eStore. Instead of using the product title for the REL attribute it uses the following for all the items on the same page:

rel=”shadowbox[sbpost-1806];

Consequently, the images keep scrolling from one product to the next. The plugin version is 6.9.0.2 WordPress is 3.7.1 and I am using Shadowbox JS as I was using on Abrash site. If code changes are necessary please provide instructions and I will try to follow them. If I need to switch plugins I will do that if life will be easier.

Thanks,

Cemal

[admin]

Hi, There are quite a few different posts on this topic. So when you say the “same issue”, what are you referring to? What part of the eStore plugin is not working?

[acekin]

Oh, I’m sorry I should have been clearer. I add images for each product in a category, ideally more than one image for each product. When the items are displayed and I click on the first thumbnail, I see the associated image with an indication that there are more images. When I click on the “next” image button I see the image for the next product and the next, …

On an earlier instance we made some changes to the code so that it would add the product name to the REL=lightbox attribute like:

rel=”lightbox[Re-Vestida Choker & Earring Set]

which would create a “gallery” of related images. For the next product the attribute would be something like:

rel=”lightbox[Silver Earring Set]

In the new deployed installation the rel attribute refers to the “page” for all the products on it, it looks like:

rel=”shadowbox[sbpost-1806]

Therefore, all the images on that page belonging to multiple products become a collection and the second or third images for any product do not show up at all. You can see the behavior:

[http://www.mostlyhappyjourney.com/store/jewelry/]

For the Lavender pendant, the first one, there is a second image totally unrelated to this collection. I added that in the Additional Images field, and the URL there is:

[http://www.mostlyhappyjourney.com/mhj/wp-content/uploads/store/IMG_0837.jpg]

which should display a toy item.

This is my daughter’s Web site and I am helping her get it up and running.

Thank you,

Cemal

[admin]

Thank you for the explanation. I really have no idea what Shadowbox JS library does and its not something we integrate in eStore either. You (as a user) can do hacks and code tweaks but I can’t support that unfortunately.

What I can tell you is that, you don’t need another lightbox library to show the product images in lightbox. eStore comes with one by default and it works correctly (it will show the next images for the product is refers to only). So deactivate this shadowbox library and then go to eStore settings and enable the “Enable Lightbox effect on Images” option. Then check how the lightbox on the product images work.

[acekin]

I will take a look at that. Shadowbox is a lightbox substitute and in fact it will accept rel=lightbox attribute. The token created for the IMG for rel= attribute is formed by eStore I believe. The behavior after that is up to Shadowbox or Lightbox.

I have studied it a bit more with additional products and product images. If there is only one image the token is created as the post ID as I provided earlier and displays the next available product (with only one image) image as the second image. However, if there are multiple images for one product it seems to display them in sequence. In the above link, if you look at the very first product and click on the thumbnail it will display its larger image and the image for the last product, the blue pendant. The others in between have 2 or more images and it seems to work properly. I wonder if there is a setting I am overlooking. The behavior is the same with or without Shadowbox, except without Shadowbox the display of the image for a product that has one image does not use any Box effect, it displays just the JPEG image requiring the use of the Back button to return to the products.

Summary:

Without Shadowbox active:

1. There is no REL attribute for products with a single image

2. Multiple image products display with Lightbox effect in sequence

With Shadowbox active and Lightobx effect disabled:

1. REL attribute for products with a single image is formed as rel=”shadowbox[sbpost-1806]

2. REL attribute for products with multiple images is formed as rel=”shadowbox[Product Name]”

3. In the first case images are displayed from all products that have only single image

4. In the second case images for one product are displayed in sequence properly

I am inclined to think that the formation of the REL attribute is suspect, but mine is only a guess.

Thank you,

Cemal

[acekin]

I stand corrected, please disregard my previous message as I investigate the behavior further. There are inaccuracies in what I said.

Cemal

[Author]

Posts