Make Substitution Images in Gallery|NETTER KINGDOM Make Substitution Images in Gallery

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

Comments :

11 komentar to “Make Substitution Images in Gallery”

Sovania said...
on 

Thank you so much for all your suggestions on this site. Your shares are very interesting and very rewarding. Congratulations to you .

voyance gratuite par mail ; voyance par mail gratuite

Voyance mail said...
on 

un site de cartes adorables que je découvre par hasard et pour mon plus grand plaisir, bravo !!

voyance amour

voyance gratuite par telephone said...
on 

Super your blog and it's a good job, keep it

Launch Business in Delhi said...
on 

I certainly agree to some points that you have discussed on this post. I appreciate that you have shared some reliable tips on this review.

Setup Business in Delhi said...
on 

Amazing blog and very interesting stuff you got here! I definitely learned a lot from reading through some of your earlier posts as well and decided to drop a comment on this one!

Setup Business in Delhi said...
on 

That is an extremely smart written article. I will be sure to bookmark it and return to learn extra of your useful information. Thank you for the post. I will certainly return.

Start Business in Delhi said...
on 

I really appreciate your professional approach. These are pieces of very useful information that will be of great use for me in future.

voyance gratuite mail said...
on 

I think this is one of the most important information for me. And i’m glad reading your article. But should remark on some general things, The site style is great, the articles is really excellent : D. Good job, cheers

voyance en ligne gratuite said...
on 

I appreciate, cause I found just what I was looking for. You’ve ended my four day long hunt! God Bless you man. Have a nice day. Bye

sofy lefour said...
on 

A big thank you to you, good luck for your next site
voyance par mail gratuite

voyance par mail said...
on 

I’m not sure exactly why but this weblog is loading very slow for me. Is anyone else having this issue or is it a problem on my end? I’ll check back later on and see if the problem still exists.

Post a Comment

Please don`t spaming !
Please do not put a link in the comments box. Author of comments have been getting backlinks from this blog.
I will deleted if your comment is spam or put your link IN THE COMMENTS BOX !!!
Have a nice day my friend... :D

Top Commenters