как отображается всплывающее окно при переносе миниатюрного изображения?JavaScript, CSS - PullRequest
Новая
       20

как отображается всплывающее окно при переносе миниатюрного изображения?JavaScript, CSS

2 голосов
/ 16 октября 2011

Я создаю фотогалерею, и в соответствии с требованием, когда мышь наводит курсор на миниатюру изображения, должна отображаться небольшая увеличенная версия миниатюры с такими деталями, как заголовок фактического изображения, размер и т. Д. увеличенное изображение. Обратите внимание - увеличенное изображение отображается только при наведении курсора и сразу исчезает, когда мышь выходит за пределы области миниатюрного изображения. Я знаю, что это действительно распространенная функция на большинстве сайтов фотогалереи, и прекрасным примером является поиск изображений Yahoo (см .: Поиск изображений Yahoo )

По сути, согласно требованию код должен быть встроен в Javascript без использования каких-либо библиотек, таких как Jquery. Таким образом, в ядре JS, ролловер должен работать.

Я знаю, что onmouseover может сделать это, но мой вопрос заключается в том, как сделать так, чтобы увеличенное изображение отображалось соответствующим образом (как, например, справа от миниатюры, когда достаточно места, или слева / сверху / в верхней части миниатюры, как может быть ограничение расстояния?

Кроме того, как "новая страница", которая появляется на ролловере, предназначена (ну, не совсем новая страница, а просто ненавязчивое всплывающее окно)?

Любые указания о том, как идти, высоко ценится. Примечание. Я знаю, что библиотеки облегчают эту задачу, но, как я уже сказал, это нужно делать в ядре JS, даже если появление / исчезновение выглядит грубым.

Спасибо!

Ответы [ 3 ]

2 голосов
/ 16 октября 2011

Простая, простая реализация без сторонних библиотек или 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>
1 голос
/ 16 октября 2011

Вы можете использовать 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>
0 голосов
/ 16 октября 2011

Вы можете использовать div с абсолютным позиционированием в качестве контейнера, чтобы показать увеличенную версию. Установите «влево» и «верх» div в зависимости от x & y миниатюры. Чтобы рассчитать положение div, вы можете использовать высоту и ширину окна и проверить, если 

[width of pop-up div] + [left of the div] < [width of the window]

То же самое можно сделать и для высоты.

...