Как сделать галерею

-1

Я сделал фотогалерею по HTML и CSS. Я хочу, когда я нажму на, мое изображение будет отображаться в полном размере медленно в коробке. Но я не знаю, как это сделать. Можете ли вы помочь мне решить эту проблему? Если возможно, пожалуйста, дайте мне полный код. Мой код:Как сделать галерею

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title> My gallery</title> 
    <style type="text/css"> 
.gallery { 
    border: 1px solid #000; 
    width: 160px; 
} 
.img_head { 
    border-bottom: 1px solid #000; 
    text-align: center; 
} 
img { 
    height: 150px; 
    width: 150px; 
    margin: 5px; 
} 
img:hover { 
    height: 158px; 
    width: 158px; 
    margin: 1px; 
    cursor: pointer; 
} 
    </style> 
</head> 
<body> 
    <div class="gallery"> 
     <div class="img_head"> 
      <h3>My Image</h3> 
     </div> 
     <img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" /> 
    </div> 
</body> 
</html>

источник

2016-01-04 Rajib.Hassan

Лучший способ * узнать * как сделать свой собственный галерея будет посмотреть, как работают другие галереи и делать это. Некоторые хорошие примеры: http://lokeshdhakar.com/projects/lightbox2/ и http://fancybox.net/ Есть также множество других галерей изображений/лайтбоксов, которые вы можете посмотреть, чтобы получить представление о , можно обнаружить с помощью простого поиска Google. –

Вот пример, который может работать для вас:

jsFiddle Demo

HTML:

<div id="overlay" class="abs"></div> 
<div id="lb" class="abs"> 
    <div id="lbHead"> 
    <div id="lbTitle">Your image</div><div id="lbX">X</div> 
    </div> 
    <div id="lbBody"> 
    </div> 
</div> 
<div class="gallery"> 
    <div class="img_head"> 
    <h3>My Image</h3> 
    </div> 
    <img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" /> 
</div>

JS/JQuery:

$('img').click(function(){ 
    var tmp = $(this).attr('src'); 
    $('#lbBody').html('<img src="'+tmp+'" />'); 
    $('#overlay, #lb').fadeIn(1800); 
}); 

$('#lbX').click(function(){ 
    $('#overlay, #lb').fadeOut(800); 
});

CSS:

.abs {position:absolute} 
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;} 
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;} 
#lbHead{height:40px;width:100%;background:darkcyan;} 
#lbTitle{float:left;width:70%;height:30px;color:white;} 
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;} 
#lbX:hover{background:white;color:darkcyan;cursor:pointer;} 
img:hover{cursor:pointer;} 

#overlay, #lb{display:none;}

источник

2016-01-04 05:32:23 gibberish

@@ gibberish Большое спасибо. Ваш код работает хорошо. Но мне нужна твоя помощь. Если я хочу добавить следующую и предыдущую кнопку, что мне делать? вы можете мне помочь? –

Вы можете использовать эти типы галереи

http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/ https://blueimp.github.io/Bootstrap-Image-Gallery/ http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#

источник

2016-01-04 05:13:31

Как сделать галерею

ответ

Смежные вопросы