jQuery integration problem

Question

I have an problem to get my jQuery code working with D7. In HTML it works fine but with D7 it doesn't work at all...

the code:

(function ($) {

Drupal.behaviors.exampleModule = {
attach: function(context, settings) {                           

    var thumbstart = $("ul li img");        

    for (var i = 0, ii = thumbstart.length; i < ii; i++){
        if (thumbstart[i].title && thumbstart[i].title.length > 0)
        {           
            var imgtitle = thumbstart[i].title;     
            $(thumbstart[i]).wrap('<div class="wrapper" />').               
            after('<div class=\'inner\'><span class=\'caption\'>' + imgtitle + '</span></div>').
            removeAttr('title');

        }                   
    };
// At here the code works fine...
$('.wrapper').find('img').css({opacity: ".8"}); 
$('.teaser').find('.caption').css({top:"107px"}); 
$('.test2').find('.caption').css({top:"165px"}); 

$('.teaser').hover(
    function(){
        $(this).find('img').animate({opacity: "1.0"}, 300);     
        $(this).find('.caption').animate({top:"160px"}, 300);               
    }, 
    function(){
        $(this).find('img').animate({opacity: ".8"}, 300);  
        $(this).find('.caption').animate({top:"107px"}, 300);           
    }       
    );  


}
};

})(jQuery);

the problem is that the top of part is not working (begins at: var thumbstart...) is there anything that I can do? Does D7 need extra library/modules?

Answer 1

Far from needing extra libraries, Drupal needs less libraries then you're giving it.

Drupal 7 ships with jQuery 1.4, and can be updated to 1.5.2 with the jQuery Update module. Updating to v1.7 is not really feasible at the moment (see How do I update jQuery to the latest version I can download?, and search the site for 'latest jquery' for more information on that).

Even if the core/contrib Drupal JS worked well with v1.7, you can't just add it to the page and expect it to work, it will conflict with the core jQuery libraries added by Drupal (see jQuery.noConflict() for background).

That said, I can't see anything in your code that would necessitate using jQuery 1.7, so just remove the erroneous line from your .info file, clear the caches, and move on :)

To address the problems with your code now that the correct jQuery files are being included:

Your JS looks like this:

if (thumbstart[i].title && thumbstart[i].title.length > 0)

So the wrapper won't be added unless the <img> has a title. If you look at the source code of http://icon-guideline.fanlobby.net/ you'll see that the markup is as such:

<ul><li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/Android.png" /></a></li>
<li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/iPhone.png" /></a></li>
<li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/WindowsPhone.png" /></a></li>
<li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/BlackBerry.png" /></a></li>

As you can see, there's no title on any of the images, so your JS condition will never resolve to true, and the wrapper will never be added.