Finding Image and Place into another img source
My Html Markup is like this
<div id="main">
<div id="slider">
<img src=""/>
</div>
<div class="clear slider"></div>
<div class="slider ndslider">
<a href="#" rel="bookmark">
<img src="#" title=""/>
</a>
</div>
<div class="slider rdslider">
<a href="" rel="bookmark">
<img src="" title=""/>
</a>
</div>
<div class="slider thslider nivoSlider">
<a rel="bookmark" href="" class="nivo-i开发者_开发问答mageLink" >
<img src="image src" >
</a>
<a rel="bookmark" href="" class="nivo-imageLink">
<img title="" src="">
</a>
<a rel="bookmark" href="#" class="nivo-imageLink">
<img title="" src="">
</a>
<div class="nivo-slice"></div>
<div class="nivo-slice"></div>
<div class="nivo-slice"></div>
<div class="nivo-directionNav">
<a class="nivo-prevNav">Prev</a>
<a class="nivo-nextNav">Next</a>
</div>
<div class="nivo-controlNav">
<a rel="0" class="nivo-control active">
<img alt="" src="undefined">
</a>
<a rel="1" class="nivo-control">
<img alt="" src="undefined">
</a>
</div>
</div>
</div>
I want to find the all the images inside this DIV
<div class="slider thslider nivoSlider">
</div>
and set that images on to this
<div class="nivo-controlNav">
<a rel="0" class="nivo-control active">
<img alt="" src="undefined">
</a>
</div>
For Doing the same i had written my custom jQuery but it is not working.
jQuery(document).ready(function() {
jQuery('.thslider a img').each(function(){
var imgSrc = jQuery(this).attr('src');
var newSrc = 'http://saorabh-test1.rtcamp.info/wp-content/themes/twentyten/timthumb.php?src='+ imgSrc +' &h=50&w=50&zc=1';
jQuery(".thslider .nivo-controlNav a img").attr('src',newSrc);
});
});
Help me..
You might want to pass imgSrc
through encodeURIComponent()
before using it as a URI component, also, you have an extra whitespace character after the imgSrc, +' &
should be just +'&
.
Also your initial selector .thslider a img
will give you all the img
tags (including the thumbnails), you may want to restrict that selector to .nivo-imageLink img
.
Also you are setting the src
attribute for ALL the images matched by .thslider .nivo-controlNav a img
, not just the image with the same index number.
Put back together:
jQuery(function() { // shortcut for jQuery(document).ready(function() {
jQuery('.thslider .nivo-imageLink img').each(function (idx) {
// idx is the index of the image, use the same index for thumbs:
var $thumb = jQuery(".thslider .nivo-controlNav a img").eq(idx);
$thumb.attr('src', 'http://saorabh-test1.rtcamp.info/wp-content/themes/twentyten/timthumb.php?src='+ encodeURIComponent(this.src) +'&h=50&w=50&zc=1');
});
});
Demo on jsfiddle
Update
Ok here is the problem .. your original url contained the entire path to the image, so the src you retrieved was a complete path and not the src attribute you were passing in the URL as a parameter..
Change your code to this and it should be fine
jQuery(document).ready(function() {
jQuery('.thslider a img').each(function(index){
var imgSrc = jQuery(this).attr('src');
// now we replace the dimensions from the original url using regular expressions.. the 50 is the new dimensions .. change it appropriately..
var newSrc = imgSrc.replace(/h=(.*?)&/gi,'h=50&').replace(/w=(.*?)&/gi,'w=50&');
jQuery(".thslider .nivo-controlNav a:eq("+index+") img").attr('src',newSrc);
});
});
Original answer
What exactly is not working ?
If the problem is that all the destination images get changed to the same thing then change your code to
jQuery(document).ready(function() {
jQuery('.thslider a img').each(function(index){
var imgSrc = jQuery(this).attr('src');
var newSrc = 'http://saorabh-test1.rtcamp.info/wp-content/themes/twentyten/timthumb.php?src='+ imgSrc +' &h=50&w=50&zc=1';
jQuery(".thslider .nivo-controlNav a:eq("+index+") img").attr('src',newSrc);
});
});
精彩评论