Hi
On my website I need to show more that one img of a home, so what I wanted to do was the following:

So I found some code and thought that's perfect, Yeah I thought.... but when I then run my page on GTmetix is gives me for all those imgs, I have only loaded one property so far, but thought I need to resolve this prior to doing all listings. http://www.silvertreeestates.co.za/#P105691903
I also thought, well this should be easy, I would just define the thumbnail size in css right... well that sucked
Code:
#thumbs{padding-top:1px;padding-left:1px;overflow:hidden;}
#thumbs img, #largeImage{cursor:pointer;height:249px;width:446px;}
#thumbs img{float:left;margin-top:15px;margin-right:10px;width:80px;height:53px;}
.tpic{border-radius:10px;border:2px solid #748178;float:left;height:80px;width:53px;padding:1px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25)}
.tpic:hover{border-radius:10px;border:2px solid #FF0000;float:left;padding:1px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25)}
as when I change this line from
Code:
#thumbs img{float:left;margin-top:15px;margin-right:10px;width:80px;height:53px;}
to
Code:
#thumbs img{float:left;margin-top:15px;margin-right:10px;}
All the thumbnails are now see as "largeImage"
Code:
<script>$('#thumbs').delegate('img','click', function(){$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));$('#description').html($(this).attr('alt'));});</script>
html code for the section:
Code:
<!--Property Listing Start-->
<div class="divborder col-md-1" id="P105691903"><div class="divTable"><div class="divTableBody"><div class="divTableRow">
<div class="divTableCell"><div class="divTableCell"><a href="https://www.property24.com/for-sale/honeydew-ridge/roodepoort/gauteng/819/105691903" target="_blank"> <img class="tpic" id="largeImage" src="img/listing/105691903.jpg" alt=""></a></div><div></div>
<div class="divTableRow" id="thumbs"><img class="tpic clearleft" src="img/listing/105691903.jpg" alt=""/><img class="tpic" src="img/listing/105691903a.jpg" alt=""/><img class="tpic" src="img/listing/105691903b.jpg" alt=""/><img class="tpic" src="img/listing/105691903c.jpg" alt=""/><img class="tpic" src="img/listing/105691903d.jpg" alt=""/></div></div></div>
<div class="divTableRow"><div class="divTableCell"><p class="htext">Stunning newly renovated unit with quality finishes throughout</p><h1>Honeydew Ridge</h1><h3><span class="zar zarsprite currtextsprite">R 1,150,000</span></h3>
<div class="divTableCell receptionsprite imgsprite"><div class="textsprite">2</div></div><div class="divTableCell bedsprite imgsprite"><div class="textsprite">3</div></div><div class="divTableCell bathsprite imgsprite"><div class="textsprite">2</div></div>
<br><div class="divTableCell sizesprite imgsprite"><div class="bigtextsprite">116mē</div></div><div class="divTableCell ratesprite imgsprite"><div class="bigtextsprite">R 385</div></div><div class="divTableCell levysprite imgsprite"><div class="bigtextsprite">R 1,423</div></div><p class="hbond">Can you afford this mortgage (based on 20 Years @ Prime) per month - R 11,289</p>
<br><div class="divTableCell dianesprite imgsprite"></div></div></div><div class="divTableRow"><div class="divTableCell"><div class="social"><h4> </h4></div></div></div></div></div></div>
<!--Property Listing End-->
I hope I have explained myself clearly and someone can offer a fix, or alternative (John / Beverley) rgds, and thanks as always in advance.....
Bookmarks