jQuery просто показать/скрыть большое изображение из миниатюры нажмите

Question

У меня установлена ​​последняя версия библиотеки jquery и просто нужен простой эффект лайтбокса (желательно без установки каких-либо дополнительных библиотек).

Когда щелкнуто миниатюрное изображение из моего виджета карусели (jcarousel lite), я хочу показать полноразмерное изображение того же изображения в закрывающемся окне и вычеркнуть фон.

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

Любые идеи?

Answer 1

I Like jQuery Tools. Конечно, это еще одна библиотека, но это того стоит! Я включаю эту библиотеку в MOST из моих веб-проектов.

Просто введите эту строку в свой тег HEAD, а также включите JQuery Lib.

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script> 

Как только это будет сделано, просто используйте библиотеку Overlay. Я использую это для всплывающих изображений, форм или чего-либо еще.

По сути, вы просто создать DIV:

<div id="image1" class="modalBox"> 
    <h2>Title</h2> 
    content 
</div> 

Стиль это:

.modalBox { 
    background-color:#fff; 
    display:none; 
    width:350px; 
    padding:15px; 
    text-align:left; 
    border:2px solid #600; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    -moz-box-shadow: 0 0 50px #ccc; 
    -webkit-box-shadow: 0 0 50px #ccc; 
    position:fixed; 
    _position:absolute; 
} 
.modalBox h2 { 
    background:url(images/logoac.png) no-repeat; 
    margin:0px; 
    padding:10px 0 10px 110px; 
    border-bottom:1px solid #333; 
    font-size:20px; 
    color:#600; 
    font-family:calibri, hevetica, tahoma, arial; 
    text-align:right; 
} 

Создать функцию JS Всплывающие дивы

var api; 
function showDiv(v){ 
    if (api) //close any pop-ups that might already be open 
     if (api.isOpened) 
      api.close(); 

    if (!document.getElementById(v)) return; 

    api=$('#'+v).overlay({ 
     mask: {color: '#000000'}, 
     top:'0px', 
     api: true   
    }).load(); 
} 

Затем При нажатии на «ссылку» просто позвоните:

showDiv('image1'); //change image1 to the name of the div with your content 

Есть еще несколько хороших анимации и эффект идти вместе с библиотекой (подобно Apple Effect и Drop Effect

высокодисперсного настраиваемый и очень полезный!

Answer 2

Я бы с jqueryui диалогах:

http://jqueryui.com/demos/dialog/