Thumbnail images with expanded view

henryvuong · April 6, 2016, 10:53pm

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. View my demo here:

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

m3g4p0p · April 7, 2016, 6:33am

Hi @henryvuong, you could scale up those thumbnails on hover like

#pic img:hover{
    transform: scale(10); /* use appropriate value here */
}

and maybe

#pic img {
    transition: transform .2s ease-out;
}

so that the user notices where the sudden large image is actually coming from when they accidentally hover a thumbnail. However, this approach has a few downsides:

The images are getting scaled to a fixed factor, which isn’t necessarily 100% of the actual image’s size. You might have to give appropriate factors for each image separately.
It might be somewhat annoying for the user when they accidentally hover a thumbnail, and then have to move the mouse away to make it disappear again. Also, they can’t flip through the images fluently (depends on the margins between the thumbnails and how large they actually get).
It doesn’t save bandwidth since the full-size images have to be loaded as thumbnails. But then again this was the case in your original approach as well.

Anyway, it’s a CSS-only workaround.

coothead · April 7, 2016, 10:07am

Hi there henryvuong,

this pure CSS example probably won’t suit your requirements,
but it is worth a look and you may even find it mildly amusing.

[code]

untitled document body { background-color:#f9fcfc; font:1em/1.618em arial,helvetica,sans-serif; } #holder { position:relative; width:47%; padding-bottom:14%; box-sizing:border-box; margin:0 auto; text-align:center;

}
#holder input{
display:none;
}
#holder #lab,#holder #lab1,#holder #lab2 {
position:absolute;
width:32.833%;
top:2.5em;
left:0;
z-index:1;
padding:0.125em;
border:0.0625em solid #999;
box-sizing:border-box;
background-color:#fff;
box-shadow:0 0 0 #999;
cursor:pointer;
transition:all 1s ease-in-out;
line-height:0;
}
#holder #lab::after {
content:‘Face creams? Come on don't be silly’;
}
#holder #lab1 {
left:33.333%;
right:auto
}
#holder #lab1::after {
content:‘Who are you looking at?’;
}
#holder #lab2{
left:auto;
right:0
}
#holder #lab2::after {
content:‘Have you been upsetting my friends?’;
}
#holder label::after {
display:block;
padding:0;
font-size:0;
color:#fff;
text-align:center;
background-color:#fff;
transition:all 1s ease-in-out;
}
#holder label img {
display:block;
width:100%;
border:0.0625em solid #000;
box-sizing:border-box;
}
#cb:checked~#lab,
#cb1:checked~#lab1,
#cb2:checked~#lab2 {
width:150%;
z-index:2;
margin-left:-25%;
padding:0.375em;
border:0.1875em solid #999;
box-shadow:0.375em 0.375em 0.375em #999;
cursor:default;
line-height:1.2em;
}
#cb:checked~#lab::after,
#cb2:checked~#lab2::after,
#cb1:checked~#lab1::after {
padding:0.3125em 0;
font-size:100%;
background-color:#333;
}
#cb:checked~#lab1,
#cb:checked~#lab2,
#cb1:checked~#lab2 {
z-index:0;
}
#cb1:checked~#lab1 {
margin-left:-58.333%;
}
#cb2:checked~#lab2{
margin-right:-25%;
}
#lab3 {
display:none;
padding:0.25em 0.5em;
border:0.0625em solid #666;
border-radius:0.5em;
background-color:#fff;
box-shadow:inset 0 0 0.25em #999, 0.25em 0.25em 0.25em #999;
cursor:pointer;
line-height:1.2em;
}
#cb:checked~#lab3,
#cb1:checked~#lab3,
#cb2:checked~#lab3 {
display:inline-block;
}
#cb:checked~#lab3::before,
#cb1:checked~#lab3::before,
#cb2:checked~#lab3::before {
content:‘zoom out’;
}
Content {
max-width:62.5em;
padding:1em;
margin:1em auto;
border:0.0625em solid #999;
border-radius:1em;
box-sizing:border-box;
background-color:#fff;
}
@media screen and (max-width:50em) {
#holder {
padding-bottom:17%;
}
}
@media screen and (max-width:30em) {
#holder {
padding-bottom:21%;
}
}
@media screen and (max-width:20em) {
#holder {
padding-bottom:26%;
}
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.

[/code]

coothead

John_Betong · April 7, 2016, 3:35pm

Many thanks.

It is very good, I like it and sure I will be able to make use of it in the near future.

Online Demo

I like the way the lady turns her head

henryvuong · April 7, 2016, 10:32pm

Somebody gave me this script:

One problem with this script is my photos come in different sizes, and using a fixed preview pan will crop off some images. It’s OK to have distorted thumbnail, but I would like to have whole image in preview. The with of the preview must not exceed 350px, but the height need not be constrained. Can someone help me fix the problem? Thanks

ronpat · April 8, 2016, 4:55am

Hi, henryvuong.

The height of the .preview box cannot adapt to the height of the background-image using CSS. However, the size of the background-image can adapt to the size of the box.

It is good practice to include the width="", height="" and alt="" attributes for foreground images.

Try this please:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HenryVuong</title>
<!--
https://www.sitepoint.com/community/t/thumbnail-images-with-expanded-view/220308/5
Apr 7,2016, 6:32 PM
http://codepen.io/henryvuong/pen/qZpPqM
-->
    <style type="text/css">
#picWrap {
    width:360px;
    text-align:center;
    margin-top:20px;
    margin-left:10px;
}
.preview {
    max-width:350px;
    height:350px;  /* {height:auto;} does not apply to background images. */
    background-image: url(http://s16.postimg.org/p66wpcl1h/iphone1.jpg);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    margin-bottom:3px;
    outline:1px dashed magenta;  /* TEST Outline.  To Be Deleted */
}
.thumb {
    width:60px;
    height:60px;
    vertical-align:top;
    padding:2px;
    border:1px solid transparent;  /* Added to prevent thumb from shrinking 2px when selected */
    box-sizing:border-box;
    margin-right:3px;
    margin-bottom:8px;
}
.thumb:hover {
    cursor:pointer;
}
.thumb:focus {
    border-color:#ff0000;
}
#one:focus ~ .preview {
    background-image: url(http://s16.postimg.org/p66wpcl1h/iphone1.jpg);
}
#two:focus ~ .preview {
    background-image: url(http://s29.postimg.org/l1a2bej93/iphone2.jpg);
}
#three:focus ~ .preview {
    background-image: url(http://s23.postimg.org/yc3ke7zd7/iphone3.jpg);
}
    </style>
</head>
<body>

<div id="picWrap">
    <div id="pic">
<!-- The "onload" handler and <span> tag are used to hide the broken link when the image does not exist -->
        <img id="one" class="thumb" tabindex="1" src="http://s16.postimg.org/p66wpcl1h/iphone1.jpg" alt="iphone face" width="281" height="500">
        <img id="two" class="thumb" tabindex="2" src="http://s29.postimg.org/l1a2bej93/iphone2.jpg" alt="iphone side" width="670" height="460">
        <img id="three" class="thumb" tabindex="3" src="http://s23.postimg.org/yc3ke7zd7/iphone3.jpg" alt="iphone cover" width="600" height="564">
        <div class="preview"></div>
    </div>
</div>

</body>
</html>

henryvuong · April 9, 2016, 7:27pm

@ronpat, your script works great, thank you.

One more thing, is there anyway to 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 embeded 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 the 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 temporaly 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.

ronpat · April 10, 2016, 11:09am

Hi, henryvuong.

Since you have the ability to add text to the alt attribute, then, yes, it can be done with the following CSS:

img[alt="noimage"] {
    display:none;
}

(unrelated)

I’d like to recommend that you add

.thumb {
    display:inline-block;   /* ADD Me */

and in the interest of balance, change:

.thumb {
    margin-right:3px;

to:

.thumb {
    margin-left:1px;
    margin-right:1px;

I noticed that #picWrap has a width assigned of 360px; however, the inner container, .preview, only has a max-width of 350px. While the difference in widths is interesting, assigning max-width to a container inside a fixed width parent container begs the question, “why?”. Do you plan to ask how to make the larger .preview image fluid?

Sorry, can’t help the curiosity

Cheers

system · July 10, 2016, 6:09pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.