4
Answers

How to get thumbnails as pop up with main image ?

I have created one main image  and four vertical thumbnails. when i clicked on main image it will show in pop up with thumbnails . i am not getting thumbnail images.
here is my code
<div id="popup_content">
<div class="col-md-12" style="margin-top: 45px;">
<!--col-md-12 start-->
<div class="col-md-4 displayimg" id="xyz"> <!-- in col-12, 4cols start here -->
<div>
<div id="divzoom" style="cursor: pointer;">
<div id="mainpic" style="width:270px;height:500px; >
<span class="glyphicon glyphicon-zoom-in" aria-hidden="true">
<a href="#" class="topopup"> <img id="ContentPlaceHolder1_imgMainImage" class="img-
responsive" src="images/designstyles/a.jpg" height="690" width="500"/></a><a href="#" id="close"class="btnclick" ></a></span>
</div>
</div>
</div>
</div> <!-- in col-12, 4cols end here -->
<div class="col-md-1 rtsmobthumb1" id="abc"> <!-- in col-12, 1cols start here -->
<br>
<div class="tn">
<img id="lkj" src="images/designstyles/a.jpg" class="img-responsive rts_img" height="60"
width="55" />
<img id="mno" src="images/designstyles/b.jpg" class="img-responsive rts_img" height="60"
width="55" />
<img id="ghi" src="images/designstyles/c.jpg" class="img-responsive rts_img" height="60"
width="55" />
<img id="pqr" src="images/designstyles/d.jpg" class="img-responsive rts_img" height="60"
width="55" />
</div>
</div> <!-- in col-12, 1cols end here -->
</div><!-- in div dialog -->
</div>
</div>
 
Answers (4)
0
Blake Isaac

Blake Isaac

NA 2 0 9y
I think Nilesh's code should do the trick.
If you are looking for more professional images/documents viewer with thumbnails, I tried the HTML5 document viewer from Leadtools and it looks promising. You can check their online application here:
http://demo.leadtools.com/HTML5/DocumentViewerDemo/index.html
0
Nilesh Jadav

Nilesh Jadav

7 23.8k 5.7m 9y
Have you used Light Box for this., it will be really easy to make out that. 
I saw your site, your main is working fine , but have issues in thumbnails. You should try Light box or any of these:
 
  •  
  • Thickbox
  • LightBox
  • FancyBox
  • FaceBox
  • NyroModal
  • PiroBox
 
 
  1. Create a link element ()
  2. Give the link a class attribute with a value of thickbox (class="thickbox")
  3. Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)
0
shaik.jameer .

shaik.jameer .

NA 0 990 9y
I want main image and it thumbnail image as pop up onclick of main image.please check this link
http://www.houseofblouse.com/ready-to-shop-item/peach-gold-checked-kota-silk-saree-35 
0
Nilesh Jadav

Nilesh Jadav

7 23.8k 5.7m 9y
Check this link :
 
 
1) http://cssdemos.tupence.co.uk/image-popup.htm