Как отображается всплывающее окно при переносе миниатюрного изображения? JavaScript, CSS
Я создаю фотогалерею, и в соответствии с требованием, когда мышь наводит курсор на миниатюру, на увеличенном изображении должна отображаться небольшая увеличенная версия миниатюры с такими деталями, как заголовок фактического изображения, размер и т. Д., Обратите внимание - увеличенное изображение отображается только при наведении курсора и сразу исчезает, когда мышь выходит из области эскиза изображения. Я знаю, что это действительно распространенная функция на большинстве сайтов фотогалереи, и прекрасным примером является поиск изображений Yahoo (см.: Поиск изображений Yahoo)
По сути, согласно требованию код должен быть встроен в Javascript без использования каких-либо библиотек, таких как Jquery. Таким образом, в ядре JS, ролловер должен работать.
Я знаю, что onmouseover может сделать это, но мой вопрос заключается в том, как сделать так, чтобы увеличенное изображение отображалось надлежащим образом (например, справа от миниатюры, когда достаточно места, или же слева / сверху / сверху от миниатюра, как может быть ограничение расстояния?
Кроме того, как спроектирована "новая страница", которая появляется на ролловере (ну, не совсем новая страница, а просто ненавязчивое всплывающее окно)?
Любые указания о том, как идти, высоко ценится. Примечание. Я знаю, что библиотеки облегчают эту задачу, но, как я уже сказал, это нужно делать в ядре JS, даже если появление / исчезновение выглядит грубым.
Спасибо!
3 ответа
Простая, простая реализация без сторонних библиотек или Ajax. Это далеко от качества производства, но может помочь вам начать.
Основная "хитрость" заключается в том, что изображение находится в контейнере, у которого CSS "переполнение: скрыто"... Затем при переключении вы устанавливаете CSS так, чтобы он отображал переполнение (например, путем изменения имени класса).... Кроме того, изменение имени класса также отображает дополнительную информацию, которая была встроена в страницу все время, но была установлена на "display:none" раньше...
Надеюсь, что это поможет.
<html>
<head>
<style>
.container{
position: relative;
display:block;
width: 150;
height: 150px;
float:left;
margin:5px;
z-index: 1;
}
.container .popup{
position: absolute;
display:block;
width: 150;
height: 150px;
overflow: hidden;
z-index: 1;
}
.container img{
position:relative;
}
.container .footer{
display:none;
}
.containerOpen{
position: relative;
display:block;
width: 150;
height: 150px;
float:left;
margin:5px;
z-index: 20000;
}
.containerOpen .popup{
position: absolute;
display:block;
padding: 5px;
overflow: visible;
background: #ff0000;
z-index: 10000;
}
.containerOpen img{
position:relative;
left: 0px !important;
top: 0px !important;
}
.containerOpen .footer{
display:block;
background:#cccccc;
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="popup">
<img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1290129900246&id=6bfb5f7543719fe92db9edb864a8ea90" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<div class="container">
<div class="popup">
<img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1262145976094&id=358c632c2a4025e850b559ccf1778dff" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<div class="container">
<div class="popup">
<img src="http://ts2.mm.bing.net/images/thumbnail.aspx?q=1311373591873&id=6c6770a9c21d648841bbd3c47324d848" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<script type="text/javascript">
document.getElementsByClass = function(classname){
var itemsfound = [];
var elements = document.getElementsByTagName('*');
for(var i=0; i<elements.length; i++){
if(elements[i].className == classname){
itemsfound.push(elements[i]);
}
}
return itemsfound;
}
window.onload = function () {
var containers = document.getElementsByClass('container');
for (var i in containers){
var elContainer = containers[i];
var elPopup = elContainer.children[0];
var elImg = elPopup.children[0];
var elFooter = elPopup.children[1];
var width = elImg.offsetWidth;
var height = elImg.offsetHeight;
var thumbWidth = 150;
var thumbHeight = 150;
var offsetX = "left:-" + Math.round(0.5*(width-thumbWidth)) + "px; ";
var offsetY = "top:-" + Math.round(0.5*(height-thumbHeight)) + "px; ";
elImg.setAttribute("style", offsetX + offsetY );
elContainer.onmouseover = function(){
this.className = 'containerOpen';
}
elContainer.onmouseout = function(){
this.className = 'container';
}
}
}
</script>
</body>
</html>
Вы можете использовать AJAX для запроса страницы и добавления к div на текущей странице с позицией в стиле css, абсолютной или относительной. Я использую этот метод для одной из моих галерей.
- при наведении курсора на кнопку или большой палец активируется функция GetPhoto(), переключатель ("фото"), стиль ("фото");
- GetPhoto() будет привязывать к тому, что файл имеет фотографию или саму фотографию, и скрывать ее в DIV id="photo".
- toggle () Переключит видимость тега DIV id="photo" на видимый
- style () Поменяет положение тега DIV id="photo" на фиксированное.
НАСТРОИТЬ: измените файл в
xmlhttp.open("GET","YOUR.PAGE.php", правда);
на имя файла, который вы будете использовать.
<div id="photo" style="position: absolute; visibility: hidden;"></div>
<script>
//<![CDATA[
function GetPhoto(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// clear element first so it can be reused.
document.getElementById("photo").innerHTML='';
document.getElementById("photo").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET","YOUR.PAGE.php",true);
xmlhttp.send();
}
function toggle(obj) {
var item = document.getElementById(obj);
if (item.style.visibility == 'visible') {
item.style.visibility = 'hidden';
}
else {
item.style.visibility = 'visible';
}
}
function style(obj) {
var item = document.getElementById(obj);
if (item.style.position == 'fixed') { item.style.position = 'absolute'; }
else { item.style.position = 'fixed'; }
}
//]]>
</script>
<button onmouseover="GetPhoto(); toggle('photo'); style('photo');" onmouseout="toggle('photo'); style('photo');">Mouse Over Object</button>
Вы можете использовать div с абсолютным позиционированием в качестве контейнера, чтобы показать увеличенную версию. Установите "влево" и "верх" div в зависимости от x & y миниатюры. Чтобы рассчитать расположение div, вы можете использовать высоту и ширину окна и проверить, если
[width of pop-up div] + [left of the div] < [width of the window]
То же самое можно сделать и для высоты.