Make Substitution Images in Gallery

In the traditional website if we want to change the image we have to jump to another page. Woaaa, Well you may have a portfolio that many in the form of images and you want to show without having to move around the page, you can make it with jQuery as follows:

Black wallpaper. For Example, click Here.

Here is a script that need to make changes to the jQuery image above:

//if you want when you click change to $(".imgthumbs a").click(function(){
$(".imgthumbs a").hover(function(){
var largeImage = $(this).attr("href");
var imgTitle = $(this).attr("title");
$("#largeImages").attr({ src: largeImage, alt: imgTitle });
$(".imgTitle").html(imgTitle);
return false;
});

The results of the above coding integration with css and html is as follows:

<script type="text/javascript">
$(document).ready(function(){
$(".imgthumbs a").hover(function(){
var largeImage = $(this).attr("href");
var imgTitle = $(this).attr("title");
$("#largeImages").attr({ src: largeImage, alt: imgTitle });
$(".imgTitle").html(imgTitle);
return false;
});
});
</script>
<style type="text/css">
h2.imgTitle {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
#largeImages {
border: solid 1px #ccc;
width: 460px;
height: 300px;
padding: 5px;
}
.imgthumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
margin-right:8px;
}
.imgthumbs img:hover { border-color: #FF9900; }
</style>
<h2 class="imgTitle">Galeri Portofolioku</h2>
<p><img id="largeImages" src="../images_tutor/tjqai_1.jpg" alt="Large image" /></p>
<p class="imgthumbs">
<a href="images/wall1.jpg" title="Wallpaper Black"><img src="images/thumb_wall1.jpg" /></a>
<a href="images/wall2.jpg" title="Wallpaper Orange"><img src="images/thumb_wall2.jpg" /></a>
<a href="images/wall3.jpg" title="Wallpaper Green"><img src="images/thumb_wall3.jpg" /></a>
<a href="images/wall4.jpg" title="Wallpaper Blue"><img src="images/thumb_wall4.jpg" /></a>
</p>

Explanation jQuery code to change the image that I created above is as follows:

1. $ (". imgthumbs a"). hover (function () {this is for pictures with the class declaration imgthumbs highlighted when the mouse pointer, you can change the hover with a click if you want at the click
2. largeImage var = $ (this). attr ("href"); is defining largeImage variable with a value in the capture of the href attribute imgthumbs
3. imgTitle var = $ (this). attr ("title"); is the defining variable imgTitle with values &#8203;&#8203;taken from the title attribute imgthumbs
4. $ ("# largeImages"). attr ({src: largeImage, alt: imgTitle}); used to replace the image on the appointment id largeImages with predetermined variables (largeImage)
5. $ (". imgTitle"). html (imgTitle); used to replace the text contained in the class imgTitle with predetermined variables (imgTitle)

Good luck

Tweet

Make Substitution Images in Gallery

4/ 5

Oleh Sepeda ��

Ditulis Sepeda �� Pada 4:07 AM