#javascript #jquery #image #hover #fancybox
#javascript #jquery #изображение #наведите курсор #fancybox
Вопрос:
Я новичок на сайте и относительно новичок в ASP.NET (по крайней мере, в коммерческом плане).
Здесь немного забавная проблема. Я использую несколько плагинов jQuery на одной странице. То, что я пытаюсь сделать, это показать предварительный просмотр уменьшенного изображения при наведении курсора мыши на изображение, а затем переключить изображение на другое после нажатия и показать это изображение в FancyBox — 3 отдельных изображения, если хотите (назовем их A, B и C). Все это помещается в слайдер (еще один плагин jQuery).
Мне удалось заставить изображение зависать внутри слайдера и даже в модном окне для одного и того же изображения; т.Е. ImgB зависает, а ImgB отображается в модном окне. Проблема в том, что я не могу переключиться на imgC при нажатии и отображении FancyBox. Проблема в том, что как для кода предварительного просмотра изображения, так и для FancyBox требуется тег <‘a’> , который, очевидно, не может быть вложен друг в друга. Мой код Javascript выглядит следующим образом:
<script type="text/javascript">
$(document).ready(function() {
$("a#imgB").fancybox();
});
</script>
Мой код html-изображения выглядит следующим образом:
<a href="image/imgB" class="preview" id="imgB">
<img src="image/imgA" alt="Image A">
</a>
Приведенный выше код отображает изображение «ImgB» при наведении курсора и отображает то же изображение в FancyBox после нажатия. Что я хочу сделать, так это оставить наведение как есть, но переключить изображение FancyBox на другое — imgC — после нажатия. Согласно веб-сайту FancyBox, вы можете принудительно изменить HREF, изменив параметр HREF. Я попробовал несколько вариантов, в том числе этот:
$("a#imgB").fancybox({
'href': href.replace('image/imgC.jpg')
});
Но, к сожалению, это не работает. У меня такое чувство, что это что-то действительно простое, что бросается мне в глаза, но я не могу понять. Я был бы благодарен за любую помощь.
Спасибо!
Ответ №1:
Исправлено простым изменением скрипта:
$("a#imgB").fancybox({
'href': 'image/imgC.jpg'
});
Похоже, это было слишком сложно. Д’о! :о)
Ответ №2:
Можете ли вы изменить плагин наведения, чтобы вместо него использовать контейнер div? Я не думаю, что должна быть причина, по которой вы можете только навести курсор на ссылку
Комментарии:
1. Спасибо за ваш комментарий. Вы имеете в виду изображение, вложенное в div? Ему необходимо знать URL изображения для отображения при наведении курсора мыши. Я пробовал вложить внутри div, но это не работает. Возможно, пришло время попробовать другой плагин для наведения
2. Я имею в виду наличие изображения в div (наведение) в a (щелчок). А затем поместите ссылку в атрибут alt наведенного div. Я не знаю, будет ли это работать с вашим плагином наведения