Thumbnail images with expanded view

[henryvuong]

I am using this script in my eBay auctions. In the description, I have several images displayed as thumbnails. When user clicks on a thumbnail, a large image is displayed in the expanded view. This script uses CSS and Javascript. Here’s the demo:

https://codepen.io/henryvuong/pen/GZygXz

It works fine for me. However, eBay just has a new policy which will not allow users to post any JavaScript in the description. I have to come up with a new way to use only CSS and HTML for this script. Please help. Thanks

[Paulie_D]

However, eBay just has a new policy which will not allow users to post any JavaScript in the description. I

You mean they’ve disabled ALL JS…or just the way you use it?

I suspect they must allow some JS….even if it’s they’re own limited variation.

Other than that I’m not sure what we can offer….CSS can only do so much….everything else is JS.

[bearhead]

It would be pretty easy using the :focus pseudo class and the sibling selector:
http://codepen.io/kvana/pen/GZyNOR

The major difference is that the thumbnails will be above the preview… you could probably get them below with some messy positioning, but I would say it’s probably not worth it…

You could also look into the “checkbox hack” although in this case I guess it would be more of a radio button hack.

Also, ids that start with a number are invalid, so you should probably change them.

[henryvuong]

@Paulie_D:
Yes, eBay will eventually phase out all JS and other active contents, only CSS and HTML are allowed.

@bearhead:
Your code is nice. One problem: I use one template for all my ebay auctions, and each auction has photos with different sizes. So if I use the same code for photos with different sizes, some of them will be cropped off in preview pan, like this one:

http://codepen.io/henryvuong/pen/eZyGmW

It’s OK to have distorted thumbnails, but I would like to have the preview display whole image. The height of the preview does not need to be constrained, only the width must be 350px. I cannot go into every auction and change the width and height every time because I have hundreds of auctions posted every week. Thanks for helping.

[bearhead]

If you don’t want the thumbnails to be distorted, you can just remove the height declaration. It would probably be even better to use divs with background images for the thumbnails…

Unfortunately there isn’t going to be any way to get the height of the preview to size automatically using my first method.

You can do it with the previews being imgs, and then showing/hiding them based on which thumb has focus:
http://codepen.io/kvana/pen/bpaxEm

It’s not as clean, but maybe it will work better for you.

[henryvuong]

The script seems to work, but the first image preview does not actually disappear when I click on second or third thumbnail. It’s just hidden under the second or third image, but it’s still there. You can see the effect if you swap the position of the first image with any of the other two, part of it will be visible when you click on the other thumbnails.

Someone helped me come up with this script:

http://codepen.io/henryvuong/pen/MyQgro

This script works for me. But I would like to ask if you can help me do one more thing: make a thumbnail disappear if the image does not exist. Most of my auctions have 3 photos, but some have 2 or 1. If I use this script on an auction that only has 2 photos, the third thumbnail will appear as a broken image link.

I use a software to manage my eBay auctions and this script is embedded in a template for all auctions, so if an auction has less than 3 images, it still display 3 thumbnails, with the missing thumbnails being displayed as broken image icon.

Can you modify the script to make a broken image icon automatically disappear? In my original JavaScript posted above, it is taken care of, but without JavaScript it must be done with CSS. My temporary solution is to add “alt = no image” attribute to img tag to let viewer know that the image does not exist, but it would be better to make it disappear instead.

[Atelierbram]

You can see the effect if you swap the position of the first image with any of the other two, part of it will be visible when you click on the other thumbnails.

This is because the first image is visible by default, otherwise there would have been just an empty space there. You could have solved it like this:

#pre1,
#one:focus ~ #pre1{
  display:inline-block;
}
#two:focus ~ #pre1,
#three:focus ~ #pre1 {
  display: none;
}

But maybe you want to go with background-images now anyway.

My temporary solution is to add alt = "no-image" attribute to img tag to let viewer know that the image does not exist

If there would always be an alt attribute with a value of “no-image” on broken images, then additional one could do:

.thumb[alt*="no-image"] {
  display: none; 
}

But better would be if this could be solved on a template level, so broken images aren’t generated at all.

[Author]

Posts