jquery ui.sortable с подсказками

Question

На странице У меня есть сортируемый список с эскизами. При просмотре изображений мне нужна всплывающая подсказка, чтобы показать большее изображение. Я нашел qTip, но может быть что-то лучше/проще?

Как подключить imgPath var от сортируемого к qtip?

var imgPath = '<img src="002171/imm/001.jpg" />'; 

$("#sortable").sortable(); 
$("#sortable").disableSelection(); 

$('#sortable li img').qtip({ 
    content: { 
     text: imgPath 
    } 
}); 


<div id="demo"> 
    <ul id="sortable"> 
     <li><img src="002171/tn/001.jpg" /></li> 
     <li><img src="002171/tn/002.jpg" /></li> 
     <li><img src="002171/tn/003.jpg" /></li> 
    </ul> 
</div> 

Answer 1

Я разместил demo для вас. Насколько мне нравится qTip, нелегко понять, как настроить его для захвата контента из текущего HTML. Я потратил на это 20 минут, пока я не сдался. Но, хорошие новости - я знаю, что у этого tooltip script есть три версии, и один специально предназначен для предварительного просмотра изображений.

Так что вам нужно немного переформатировать свой HTML-код. href в <a> содержит большое изображение, отображаемое в подсказке, в то время как <img src> содержит миниатюру. Вы также можете включить заголовок в подсказку, добавив текст/HTML в атрибут title ссылки (см. Первое изображение в коде ниже).

HTML

<div id="demo"> 
    <ul id="sortable"> 
     <li><a class="preview" href="01.gif" title="This image has a caption"><img src="01.gif" /></a></li> 
     <li><a class="preview" href="02.gif"><img src="02.gif" /></a></li> 
     <li><a class="preview" href="03.gif"><img src="03.gif" /></a></li> 
     <li><a class="preview" href="04.gif"><img src="04.gif" /></a></li> 
     <li><a class="preview" href="05.gif"><img src="05.gif" /></a></li> 
     <li><a class="preview" href="06.gif"><img src="06.gif" /></a></li> 
     <li><a class="preview" href="07.gif"><img src="07.gif" /></a></li> 
     <li><a class="preview" href="08.gif"><img src="08.gif" /></a></li> 
     <li><a class="preview" href="09.gif"><img src="09.gif" /></a></li> 
     <li><a class="preview" href="10.gif"><img src="10.gif" /></a></li> 
    </ul> 
</div> 

CSS

.preview { cursor:pointer; } 
#preview { 
    color: #ddd; 
    background: #222; 
    border: 1px solid #333; 
    padding: 5px; 
    display: none; 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
    text-align: center; 
} 

Script

$(document).ready(function(){ 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 
}); 

// You should load the image preview script below separately 
// but I've included it here for completeness 

/* 
* Image preview script 
* powered by jQuery (http://www.jquery.com) 
* 
* written by Alen Grakalic (http://cssglobe.com) 
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery 
* 
*/ 

this.imagePreview = function(){  
    /* CONFIG */ 
    xOffset = 10; 
    yOffset = 30; 
    // these 2 variable determine popup's distance from the cursor 
    // you might want to adjust to get the right result 
    /* END CONFIG */ 
    $("a.preview").hover(function(e){ 
     this.t = this.title; 
     this.title = "";  
     var c = (this.t != "") ? "<br/>" + this.t : ""; 
     $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");         
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn("fast");       
    }, function(){ 
     this.title = this.t;  
     $("#preview").remove(); 
    });  
    $("a.preview").mousemove(function(e){ 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });    
}; 

// starting the script on page load 
$(document).ready(function(){ 
    imagePreview(); 
});