1

I have a (very) simple CSS image gallery, it is working in firefox but not on chrome or safari, i cant figure out why... I want the image to change in the bix preview box when the smaller thumbnail is clicked, I know this code is a bit messy buy Im still learning and I can seem to work out why it will work in firefox (which I used when building the site) but not in safari or chrome, also it would be nice if the image gallery could be used if the user is on an ipad but i cant get that to work either...

<htmL>
<div class="contentbox">

<div class="gallery" align="center">
<h3></h3><br/>

<div class="thumbnails">
<img  onClick="preview.src=img1.src"  id="img1" src="gallery/img1.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img2.src" id="img2" src="gallery/img2.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img3.src" id="img3" src="gallery/img3.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img4.src" id="img4" src="gallery/img4.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img5.src" id="img5" src="gallery/img5.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img6.src" id="img6" src="gallery/img6.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img7.src" id="img7" src="gallery/img7.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img8.src" id="img8" src="gallery/img8.jpg" alt="Image Not Loaded"/>
</div><br/>                   

<div class="preview" align="center">
 <img id="preview" src="./gallery/img1.jpg" alt="No Image Loaded"/>
</div>

</div> 

 </div>

</html>

----CSS----

.contentbox {
    width: 1200px;
    height: 790px;
    border: none;
    margin: auto;
    padding-top: 0px;
    margin-top: 40px;
    font-family: champagne; sans-serif; 

}

.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.thumbnails img:hover {
    border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}

------------

Thanks in advance for any help :-)

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
user2078845
  • 579
  • 2
  • 7
  • 12

1 Answers1

0

Instead of using preview.src=img1.src, you should use document.getElementById('preview').src=document.getElementById('img1').src.

Even better, you should make a generic function :

function setPreviewImage(targetId) {
    document.getElementById('preview').src = document.getElementById(targetId).src 
}

put it in a script tag. And then in every img element use it like this :

onclick="setPreviewImage(this.id)"
kobigurk
  • 731
  • 5
  • 14