gallery image, чтобы открыть на выбранной странице

Question

У меня есть галерея миниатюр, я хочу открыть каждое большое изображение на странице предварительного просмотра с обратными ссылками. Пожалуйста, предложите, как я могу это сделать.

HTML-

<ul> 
    <li> 
     <a href="big image link"><img src="thumb nail image"/></a> 
    </li> 
    <li> 
     <a href="big image link"><img src="thumb nail image"/></a> 
    </li> 
    .... 
</ul> 

хотите открыть большое изображение в окне предварительного просмотра страницы HTML,

<div> 
    <a href="back">Go back</a> 
    <img src="holder for big image" /> 
</div> 

Пожалуйста, предложите ..

Answer 1

Если вы хотите использовать JQuery, это будет для начала работы:

html:

<div id="holder"></div> 
<ul><li><img class="pointer" src="http://bit.ly/Yx18em"/></li></ul> 

CSS:

#holder{ 
    position: absolute; 
    display: none; 
} 

li{ 
    list-style: none; 
} 

li img{ 
    width:25px; 
    height: auto; 
} 

.pointer{ 
    cursor: pointer; 
    cursor: hand; 
} 

JQuery:

$("ul img").click(function() { 
    $('#holder').html(
     '<img src="'+$(this).attr('src') 
     +'"><span id="close" class="pointer">back</span>' 
).show(); 
    $("#close").click(function() { 
     $(this).parent().hide(); 
    }); 
}); 

Рабочий пример: http://jsfiddle.net/qLEZ6/2/

Answer 2

Как об использовании плагин Photoswipe

Примердемонстрирует именно то, что вы ищете.