jquery ui.Sortable с подсказками - PullRequest
Новая
       33

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

0 голосов
/ 05 мая 2010

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

Как я могу подключить переменную imgPath из сортируемой в 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>

1 Ответ

0 голосов
/ 06 мая 2010

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

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

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;
}

Скрипт 

$(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();
});
...