Thursday, July 14, 2011

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
Make Substitution Images in Gallery
4/ 5
Oleh

Berlangganan via email

Suka dengan postingan di atas? Silakan berlangganan postingan terbaru langsung via email.