Jquery всплывающее окно с миниатюрой ссылки - PullRequest
Новая
       8

Jquery всплывающее окно с миниатюрой ссылки

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

У меня есть этот кусочек кодирования, который просто меняет изображение при нажатии на ссылку, я также показываю некоторый скрытый HTML-контент, который расположен над изображением.

 <script>
if($.browser.msie && parseInt($.browser.version) <= 6){
$('#contentone, #contenttwo, #contentthree, #contentfour, .linksBackground').hide();
}

$('#contentone, #contenttwo, #contentthree, #contentfour').hide();

$("#linkone").click(function() {
    $('#contenttwo, #contentthree, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeOne.jpg");
    $("#contentone").show("1500");
});
$("#linktwo").click(function() {
    $('#contentone, #contentthree, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeTwo.jpg");
    $("#contenttwo").show("1500");
});
$("#linkthree").click(function() {
    $('#contentone, #contenttwo, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeThree.jpg");
    $("#contentthree").show("1500");
});
$("#linkfour").click(function() {
    $('#contentone, #contenttwo, #contentthree').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeFour.jpg");
    $("#contentfour").show("1500");
});
</script>

Кто-нибудь знает, как я могу изменить это, чтобы отображать маленькое уменьшенное изображение, когда пользователь переходит по ссылке?

Мне просто нужна подсказка, потому что я не уверен, гдеобратиться к ... можно ли добиться этого при наведении курсора мыши?

1 Ответ

2 голосов
/ 27 мая 2010

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

$('yourlink').hover(function(){
    // display the thumbnail
}, function(){
    // hide the thumbnail
});

Вам нужно будет создать миниатюры вашего изображения на сервере (это можно сделать автоматически, но вы не скажете, какой язык вы там используете).

Кроме того, вы можете просто показать фактическое изображение, но изменить его размеры, чтобы уменьшить его при отображении. Имейте в виду, что если это большие изображения, время загрузки будет высоким. Старые версии IE не очень хорошо меняют размеры изображений. Попробуйте использовать этот трюк для плавного изменения размера.

Бикубическое масштабирование в IE

...