Я осмотрелся вокруг, но не смог найти то, что искал.
По сути, у меня есть изображение на странице, которое использует лайтбокс jquery, чтобы увеличить егои проще для просмотра.В дополнение к этому, с активным исходным лайтбоксом мне теперь нужны «горячие точки» на этом изображении, которые генерируют всплывающую подсказку при наведении курсора или отдельный относительно позиционированный лайтбокс при нажатии.
Тип видаМеня можно увидеть на веб-сайте Create Bikes, если вы нажмете на велосипед и перейдете на страницу продукта.
Играю, но не могу на всю жизнь разобраться - кто-нибудь знаетесли это вообще возможно или может указать мне направление на какие-либо сайты, на которых уже реализовано нечто подобное?
Редактировать:
Хорошо, как и предполагалось, яЯ поместил здесь некоторый существующий код, который, я надеюсь, поможет.
Этот блок кода типичен для того, где lightbox используется с классом lightbox-image, вызывающим скрипт.В качестве лайтбокса используется Colorbox.
<p>
<a href="images/search-wheel-big.png" title="This is where the title goes"class="lightboxElement lightbox-image" rel="lightbox-image">
<img class="c-right" alt="alt tag here" src="testimonials_files/SearchWheel.png">
</a>
Some text here
</p>
Когда лайтбокс загружен, появляются следующие теги
, включая приведенный ниже, с тегом
, сгенерированным скриптом Colorbox (он снова исчезает, когда лайтбоксзакрыто):
<div id="lightboxContent" style="float: left; width: 500px; height: 554px;">
<div id="lightboxLoadedContent" style="display: block; width: 500px; overflow: auto; height: 507px;">
<img class="lightboxPhoto" src="images/search-wheel-big.png" style="float: none;">
</div>
<div id="lightboxLoadingOverlay" class="" style="height: 554px; display: none;"></div>
<div id="lightboxLoadingGraphic" class="" style="height: 554px; display: none;"></div>
<div id="lightboxTitle" class="" style="display: block;">This is where the title goes</div>
<div id="lightboxCurrent" class="" style="display: none;"></div>
<div id="lightboxNext" class="" style="display: none;"></div>
<div id="lightboxPrevious" class="" style="display: none;"></div>
<div id="lightboxSlideshow" class="" style="display: none;"></div>
<div id="lightboxClose" class="" style="">close</div>
</div>
Затем я подумал, что смогу просто ввести команду jquery, которая будет что-то вроде:
$(".lightboxPhoto").each(function(){
$(this).append("<div class='hotspot'></div>");
});
Я надеялся, что смогу сделать это несколько раз(для различных «горячих точек» на изображении, которые, в свою очередь, можно щелкнуть / навести на них для дополнительной информации) и вставить относительно позиционированное фоновое изображение в каждый тег <div>.
Однако в коде ничего не происходитМожет ли это быть как-то связано с тем фактом, что сами теги <div> генерируются файлом .js, а не в моем исходном html?Нужно ли мне редактировать файл .js самостоятельно?
Редактировать 2 - решение!
Привет всем!
Так что я просто подумал, что яЯ бы добавил здесь, что я сделал в конце, если кто-то еще хочет создать тот же эффект.
Как подсказал Крис, я использовал встроенную команду, которая работает с лайтбоксом colorbox.Вместо того чтобы использовать всплывающую подсказку, я взял идею с веб-сайта создания велосипедов (см. Одну из страниц их продуктов) и ввел следующий HTML-код:
<div style="display:none">
<div class="example1">
<div class="example2">This is where the title goes</div>
<div class="example3">
<span class="example4"></span>
<div class="example5">
<h5 class="example6">Header text here</h5>
<p class="example7">Some more text here</p>
</div>
</div>
</div>
</div>
Тег <span> и тег <div>с классом example5 у обоих было фоновое изображение.С этим тегом <div>, имеющим состояние по умолчанию display:none, я хотел, чтобы оно изменилось на display:block, когда изображение тега <span> было включено.Я сделал это, используя следующую строку CSS:
span.example4:hover + div.example5 { display: block; }
Работает как сон!Просто имейте в виду, что этот CSS не будет работать в IE6 или менее