How can I have some thumbnails displaying at the top and the bottom of a bigger image and when people point their mouse over the thumbnails the image displays in the area of the bigger image? Or just another way to display photos on your website...
The original code for this presentation is found here. I adapted the code to fit my needs and to work with WordPress (the original code doesn't work with WordPress).
The code of the above presentation is:
<!--start_raw-->
<style>
#mouseovergallery {position:relative; height:400px;}
img.mini {border:none}
#minis {position:absolute; top:50px; left:0px; width:200px;}
div#minis a:hover {background:White}
div#minis a img.big {height: 0; width: 0; border-width: 0}
div#minis a:hover img.big {position:absolute; top:-40px;left:175px;z-index:100; width:500px; height:350px; border:none}
div#minis img.biginitial {position:absolute; top:-40px;left:175px; width:500px; height:350px; border:none}
</style>
<div id="mouseovergallery">
<div id="minis">
<img class="biginitial" src="http://iwebfaq.org/images/gallery1.jpg"/>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip17.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip17.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip08.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip08.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip09.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip09.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip17.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip17.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip11.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip11.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a>
</div>
</div>
<!--end_raw-->
<style>
#mouseovergallery {position:relative; height:400px;}
img.mini {border:none}
#minis {position:absolute; top:50px; left:0px; width:200px;}
div#minis a:hover {background:White}
div#minis a img.big {height: 0; width: 0; border-width: 0}
div#minis a:hover img.big {position:absolute; top:-40px;left:175px;z-index:100; width:500px; height:350px; border:none}
div#minis img.biginitial {position:absolute; top:-40px;left:175px; width:500px; height:350px; border:none}
</style>
<div id="mouseovergallery">
<div id="minis">
<img class="biginitial" src="http://iwebfaq.org/images/gallery1.jpg"/>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip17.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip17.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip08.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip08.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip09.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip09.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip17.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip17.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip11.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip11.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a>
</div>
</div>
<!--end_raw-->
The following code...
#mouseovergallery {position:relative; height:400px;}
is used to give the photo gallery the room it needs to work properly.
#minis {position:absolute; top:50px; left:0px; width:200px;}
refers to the position of the small images on the left.
div#minis a:hover img.big {position:absolute; top:-40px;left:175px;z-index:100; width:500px; height:350px; border:none}
Refers to the position where the big image displays when hovering over a small image and its size.
div#minis img.biginitial {position:absolute; top:-40px;left:175px; width:500px; height:350px; border:none}
Refers to the size and the position of the big image displaying when the page loads and when not hovering over a small image. The parameters of this must equal the ones which refer to the position where the big image displays hovering over a small image.
First you define which image should display when the page laods
<img class="biginitial" src="http://iwebfaq.org/images/gallery1.jpg"/>
Then every image has the following code
In there you see twice the URL to the image.
WordPressFAQ.org - Tutorials, Tips & Tricks is made with and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.
Thank you for visiting and supporting my website,
- Cédric -
It's an EBookStoretoday.com company. It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.
Thank you for visiting and supporting my website,
- Cédric -
