tag:blogger.com,1999:blog-865923359735383241.post5492977312288321551..comments2023-10-29T07:27:09.012-06:00Comments on Ccna final exam - java, php, javascript, ios, cshap all in one: Changing the image source using jQueryUnknownnoreply@blogger.comBlogger6125tag:blogger.com,1999:blog-865923359735383241.post-37655070628985619092012-06-10T22:24:40.164-06:002012-06-10T22:24:40.164-06:00One of the common mistakes people do when change t...One of the common mistakes people do when change the image source is not waiting for image load to do afterward actions like maturing image size etc.<br />You will need to use jQuery .load() method to do stuff after image load.<br /><br />$('yourimageselector').attr('src', 'newsrc').load(function(){<br /> $(this).width(); // this is how you get new width of image<br />});Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-36131185856299113902012-06-10T22:24:39.198-06:002012-06-10T22:24:39.198-06:00IF there is not only jQuery or other resource kill...IF there is not only jQuery or other resource killing frameworks - many kb to download each time by each user just for a simple trick - but also native JavaScript(!):<br /><br /><img src="img1_on.jpg" <br /> onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';"><br /><img src="img2_on.jpg" <br /> onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';"><br /><br /><br />This can be written general and more elegant:<br /><br /><html><br /><head><br /><script><br />function switchImg(img){<br /> img.src = img.src.match(/_on/) ? <br /> img.src.replace(/_on/, "_off") : <br /> img.src.replace(/_off/, "_on");<br />}<br /></script><br /></head><br /><body><br /> <img src="img1_on.jpg" onclick="switchImg(this)"><br /> <img src="img2_on.jpg" onclick="switchImg(this)"><br /></body><br /></html>Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-15315486344824098922012-06-10T22:24:38.507-06:002012-06-10T22:24:38.507-06:00You can also do this with jQuery in this way:
$(&...You can also do this with jQuery in this way:<br /><br />$(".c1 img").click(function(){<br /> $(this).attr('src','/new/image/src.jpg'); <br />});<br /><br /><br />You can have a condition if there are multiple states for the image source.Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-89120378434943905832012-06-10T22:24:37.525-06:002012-06-10T22:24:37.525-06:00If you want something using jQuery you might want ...If you want something using jQuery you might want to look into the jQuery Cycle Plugin, demo scrollRight (bottom-right example)Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-40299536224124820042012-06-10T22:24:35.966-06:002012-06-10T22:24:35.966-06:00I'll show you how to change the image src, so ...I'll show you how to change the image src, so that when you click an image it rotates through all the images that are in your HTML (in your d1 id and c1 class specifically)... whether you have 2 or more images in your HTML.<br /><br />I'll also show you how to clean up the page after the document is ready, so that only one image is displayed initially.<br /><br />The full code<br /><br />$(function() {<br /><br /> var $images = $("#d1 > .c1 > a").clone(); <br /><br /> var $length = $images.length;<br /> var $imgShow = 0;<br /><br /> $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); <br /><br /> $("#d1 > .c1 > a").click(function(event) { <br /><br /> $(this).children().attr("src", <br /> $("img", $images).eq(++$imgShow % $length).attr("src") );<br /> event.preventDefault();<br /><br /> });<br />});<br /><br /><br />The breakdown<br /><br /><br />Create a copy of the links containing the images (note: you could also make use of the href attribute of the links for added functionality... for example display the working link below each image):<br /><br /> var $images = $("#d1 > .c1 > a").clone(); ;<br /><br />Check how many images were in the HTML and create a variable to track which image is being shown:<br /><br />var $length = $images.length;<br />var $imgShow = 0;<br /><br />Modify the document's HTML so that only the first image is being shown. Delete all the other images.<br /><br />$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); <br /><br />Bind a function to handle when the image link is clicked.<br /><br /> $("#d1 > .c1 > a").click(function(event) { <br /> $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );<br /> event.preventDefault();<br /> });<br /><br /><br />The heart of the above code is using ++$imgShow % $length to cycle through the jQuery object containing the images. ++$imgShow % $length first increases our counter by one, then it mods that number with how many images there are. This will keep the resultant index cycling from 0 to length-1, which are the indices of the $images object. This means this code will work with 2, 3, 5, 10, or 100 images... cycling through each image in order and restarting at the first image when the last image is reached.<br /><br />Additionally, .attr() is used to get and set the "src" attribute of the images. To pick elements from among the $images object, I set $images as the jQuery context using the form $(selector, context). Then I use .eq() to pick just the element with the specific index I'm interested in.<br /><br /><br /><br /><br />jsFiddle example with 3 images<br /><br /><br />You can also store the srcs in an array.<br />jsFiddle example with 3 images<br /><br />And here's how to incorporate the hrefs from the anchor tags around the images:<br />jsFiddle exampleUserhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-1512742753174408702012-06-10T22:24:32.988-06:002012-06-10T22:24:32.988-06:00You can use jQuery's attr() function. For exa...You can use jQuery's attr() function. For example, if you img tag has an id attribute of 'my_image':<br /><br /><img id="my_image" src="first.jpg"/><br /><br /><br />Then you can change the src in jQuery by:<br /><br />$("#my_image").attr("src","second.jpg");<br /><br /><br />To attach this to an onclick event, you could write:<br /><br />$('#my_image').on({<br /> 'click': function(){<br /> $('#my_image').attr('src','second.jpg');<br /> }<br />});<br /><br /><br />To rotate the image, you could do this:<br /><br />$('img').on({<br /> 'click': function() {<br /> var src = ($(this).attr('src') === 'img1_on.jpg')<br /> ? 'img2_on.jpg'<br /> : 'img1_on.jpg';<br /> $(this).attr('src', src);<br /> }<br />});Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.com