Блог

Внутри слайдера я создал изображения, которые расширяются, и появляется всплывающая подсказка, однако по какой-то причине мой ранее функционировавший код больше не работает. Точно такой же код работает на JSFiddle, но не онлайн или локально. Я понятия не имею, почему.

HTML

 <ul class="thumb">
<li> <img src="imagewithtooltip.png" width="200" height="229" title="Lorem ipsum dolor     sit amet, consectetur adipiscing elit. Suspendisse tincidunt rhoncus risus sed rhoncus." />    </li>
</ul>
  

CSS

 ul.thumb {
float: none;
list-style: none;
margin: 0;
padding: 10px;
width: 360px;
bottom: 5px;
}
ul.thumb li {
margin: 0;
padding: 5px;
float: right;
position: absolute;  /* Set the absolute positioning base coordinate */
width: 200px;
height: 200px;
bottom: 5px;
right: 40%;
}
ul.thumb li img {
width: 200px;
height: 200px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic;
padding: 5px;
position: relative;
left: 0;
top: 0;
}

.hover {
background:url(thumb_bg.png) no-repeat center center;
}

.caption {
background:#ffcc00;
position: absolute;
top: 100%;
left: 0px;
}
  

Javascript

 <script type="text/javascript">
$("ul.thumb li").hover(function() {

    $(this)
        .css('z-index', '10')
        .find('img').addClass("hover")
        .stop()
        .animate({

            marginTop: '-150px',
            marginLeft: '-150px',
            top: '50%',
            left: '50%',
            width: '300px',
            height: '300px',
            padding: '20px'

        }, 200, function() {

            var $this = $(this),
                h = $this.height();
                $caption = $('<div class="caption">'   this.title    '</div>')
                              .css('top', h.toString()   'px');

            $this.after($caption);

        }); 

}, function() {

    $('.caption').remove();
    $(this)
        .css('z-index', '0')
        .find('img').removeClass("hover")
        .stop()
        .animate({

            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '200px',
            height: '200px',
            padding: '5px'

        }, 400);
});


</script>
  

ПРЯМАЯ ССЫЛКА НА ВЕБ-СТРАНИЦУ ЗДЕСЬ Я ТОЛЬКО ЧТО ЗАКОНЧИЛ КУРС ГРАФИЧЕСКОГО ДИЗАЙНА С ДРУГОМ, КОТОРЫЙ ЯВЛЯЕТСЯ ВЕБ-ДИЗАЙНЕРОМ, ХА-ХА!

Я добавил скрипку js в этот пост. Теперь это работает. Перейдите по этой ссылке и посмотрите, что работает. http://jsfiddle.net/kabircse/RNt6Z /

Используйте свой код Java script как:

 <script type="text/javascript">
  $(function(){
      $("ul.thumb li").hover(function() {
      $(this)
        .css('z-index', '10')
        .find('img').addClass("hover")
        .stop()
        .animate({
           marginTop: '-150px',
           marginLeft: '-150px',
           top: '50%',
           left: '50%',
           width: '300px',
           height: '300px',
           padding: '20px'

         }, 200, function() {

            var $this = $(this),
            h = $this.height();
            $caption = $('<div class="caption">'   this.title    '</div>')
                .css('top', h.toString()   'px');
                $this.after($caption);

          }); 

       }, function() {

     $('.caption').remove();
     $(this)
    .css('z-index', '0')
    .find('img').removeClass("hover")
    .stop()
    .animate({

        marginTop: '0',
        marginLeft: '0',
        top: '0',
        left: '0',
        width: '200px',
        height: '200px',
        padding: '5px'

     }, 400);
   });
  });
</script>