Have Geek Brain

JQuery swapImage () issue;

~ On my articles page ( http://www.adrtimes.squarespace.com/articles ) I have each post with an image that changes when rolled over. This works fine.

However, on my homepage ( http://www.adrtimes.squarespace.com ), I download the last 2 articles that are not classified as videos, and the last two articles that are marked as videos. I am using jQuery loading () to pull the content from the articles page. Everything works fine except for the swapImage rollovers on the main page. I tried to include the swapImage function as the callbacks, but only one group or other command will roll over as expected, not both content groups. I'm not sure what the problem is!

Here is the code:

<script type="text/javascript">
<!--

$(function(){ 

$.swapImage(".swapImage");

/* Homepage */
// load recent articles
$("#LoadRecentArticles").load("/articles/ .list-journal-entry-wrapper .journal-entry-wrapper:not(.category-video)", function(){ 
  //callback...
  $("#LoadRecentArticles .journal-entry-wrapper").wrapAll('<div class="list-journal-entry-wrapper" />');
  $("#LoadRecentArticles .journal-entry-wrapper:gt(1)").remove();
  // modify Read More tag
  $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ 
      var str = $(this).html(); 
      $(this).html(str.replace('Click to read more ...','Continue reading—')); 
  });
  $.swapImage(".swapImage"); 
});

// load recent videos
$("#LoadRecentVideos").load("/articles/category/video .list-journal-entry-wrapper", function(){ 
  //callback...
  $("#LoadRecentVideos .journal-entry-wrapper:gt(1)").remove();
  $('<div class="VideoTag">—video</div>').insertBefore("#LoadRecentVideos .category-video .body img");
  // modify Read More tag
  $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ 
      var str = $(this).html(); 
      $(this).html(str.replace('Click to read more ...','Continue reading—')); 
  });
  $.swapImage(".swapImage");
}); 


}); 
-->
</script>

And here is a sample html for the images in the article post:

<a href="/articles/2010/5/6/article-title-goes-here.html"><img class="swapImage {src: '/storage/post-images/Sample2_color.jpg'}" src="/storage/post-images/Sample2_bw.jpg" /></a>
+2


a source to share


2 answers


My apologies if this is not what you want, but it is very easy to do your own exchange.

I don't know exactly what your selector should be, but it will grab the src

images when you do mouseenter

, and change it from _bw.jpg

to _color.jpg

and return when you do mouseleave

.

HTML:

<img class='imageToSwap' src="http://adrtimes.squarespace.com/storage/post-images/Sample2_bw.jpg">

JQuery

    $('.imageToSwap').hover(function() {
        var $th = $(this);
        var src = $(this).attr('src');
        var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
        $th.attr('src', newSrc)
    },
    function() {
        var $th = $(this);
        var src = $(this).attr('src');
        var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
        $th.attr('src', newSrc)
    });


EDIT:

using live ()

Hope this does it for you. The jQuery function live()

will handle events for elements dynamically added to the DOM after the page has loaded.

Give it a try and let me know how it turns out.

$('.imageToSwap').live('mouseover mouseout', function(event) {
    var $th = $(this);
    var src = $(this).attr('src');
    if (event.type == 'mouseover') {
      var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
      $th.attr('src', newSrc)
    } else {
      var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
      $th.attr('src', newSrc)
    }
});
+1


a source


Will appear if you run $.swapimage()

a second time when it disconnects itself. So in the callback, try this:



$.swapImage("#LoadRecentVideos .swapImage");
0


a source






More articles:


All Articles