WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Thumbnail images with expanded view

Reply
  Thread Tools Display Modes
Old 6th April 16, 10:28 PM   #1
henryvuong
WLC Member
 
Join Date: Apr 2016
Posts: 2
Default Thumbnail images with expanded view

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:

Quote:
<html>
<head>
<style>
#picWrap {
width: 360px;
margin-left: 10px;
text-align: center;
margin-top: 20px;
}
#pic img.preview {
max-width: 350px;
height: auto;
margin-bottom: 3px;
}
.thumb {
width:60px;
margin-right:3px;
vertical-align: top;
padding:2px;
}
.selected {
border:1px solid #ff0000;
}
</style>

<script>
var lastImg = 1;
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
</script>
</head>

<body>
<!--BEGIN picture wrap -->
<div id="picWrap">
<!-- BEGIN PICTURE & THUMBNAILS -->
<div id="pic">
<!-- The "onload" handler and <span> tag are used to hide the broken link when the image does not exist -->
<img id="0" class="preview normal" src="http://s22.postimg.org/98qg2djbl/img1.jpg" alt="Picture" /><br />
<img id="1" class="thumb selected" src="http://s22.postimg.org/98qg2djbl/img1.jpg" onclick="preview(this)"/>
<span style="display:none"><img id="2" class="thumb" src="http://s23.postimg.org/9xu99orsb/img2.jpg" onload="this.parentNode.style.display='inline'" onclick="preview(this)"/></span>
<span style="display:none"><img id="3" class="thumb" src="http://s16.postimg.org/uxhurs7yt/img3.jpg" onload="this.parentNode.style.display='inline'" onclick="preview(this)"/></span>
</div><!-- END PICTURE & THUMBNAILS -->
</div><!--END picture wrap -->
</body>
</html>
You can copy and paste this script in any HTML document to view it. 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
henryvuong is offline   Reply With Quote
Old 6th April 16, 10:38 PM   #2
henryvuong
WLC Member
 
Join Date: Apr 2016
Posts: 2
Default Re: Thumbnail images with expanded view

You can view my code demo here:

https://codepen.io/henryvuong/pen/GZygXz
henryvuong is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:37 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.