Скрипт галереи для сайта скачать.

3/56 оценки

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

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

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

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

И так, как создать простую галерею изображений?

Первым пунктом является подключение всех необходимых JS скриптов на ваш сайт, давайте сделаем это!

Добавьте на сайт где то над тегом <head> строку подключения скрипта:

<script type="text/javascript" src="js/jquery-latest.js"></script>

1	<script type="text/javascript" src="js/jquery-latest.js"></script>

Сам файл Вы можете скачать в исходниках под данной статьей.

Далее Вам нужно добавить скрипт на страницу:

<script type="text/javascript">
 $(document).ready(function(){
//Увеличение при наведении
$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'});
 $(this).find('img').addClass("hover").stop()
 .animate({
 marginTop: '-110px',
 marginLeft: '-110px',
 top: '50%',
 left: '50%',
 width: '174px',
 height: '174px',
 padding: '20px'
 }, 200);

 } , function() {
 $(this).css({'z-index' : '0'});
 $(this).find('img').removeClass("hover").stop()
 .animate({
 marginTop: '0',
 marginLeft: '0',
 top: '0',
 left: '0',
 width: '100px',
 height: '100px',
 padding: '5px'
 }, 400);
 });
//Смена изображения при клике
 $("ul.thumb li a").click(function() {

 var mainImage = $(this).attr("href"); //Find Image Name
 $("#main_view img").attr({ src: mainImage });
 return false;
 });

 });
 </script>

$(document).ready(function(){

//Увеличение при наведении

$("ul.thumb li").hover(function() {

$(this).css({'z-index' : '10'});

$(this).find('img').addClass("hover").stop()

.animate({

marginTop: '-110px',

marginLeft: '-110px',

top: '50%',

left: '50%',

width: '174px',

height: '174px',

padding: '20px'

}, 200);

} , function() {

$(this).css({'z-index' : '0'});

$(this).find('img').removeClass("hover").stop()

.animate({

marginTop: '0',

marginLeft: '0',

top: '0',

left: '0',

width: '100px',

height: '100px',

padding: '5px'

}, 400);

});

//Смена изображения при клике

$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name

$("#main_view img").attr({ src: mainImage });

return false;

});

</script>

Добавить данный скрипт Вы можете непосредственно в тело страницы на которой у Вас будет работать данная галерея. Ну или же Вы можете вынести его в отдельный файл и подключить его так же:

<script type="text/javascript" src="js/main.js"></script>

1	<script type="text/javascript" src="js/main.js"></script>

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

body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}

body {

font: Arial, Helvetica, sans-serif normal 10px;

margin: 0; padding: 0;

}

* {margin: 0; padding: 0;}

img {border: none;}

.container {

height: 360px;

width: 910px;

margin: -180px 0 0 -450px;

top: 50%; left: 50%;

position: absolute;

}

ul.thumb {

float: left;

list-style: none;

margin: 0; padding: 10px;

width: 360px;

}

ul.thumb li {

margin: 0; padding: 5px;

float: left;

position: relative;

width: 110px;

height: 110px;

}

ul.thumb li img {

width: 100px; height: 100px;

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;

left: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

ul.thumb li img.hover {

background:url(thumb_bg.png) no-repeat center center;

border: none;

}

#main_view {

float: left;

padding: 9px 0;

margin-left: -10px;

}

Данные стили так же как и срипты JS о которых мы говорили выше, можно добавить в тело страницы или же вывести отдельным файлом и просто подключить на страницу, что мы и сделали.

Ну и теперь давайте добавим саму разметку HTML в которой и будет находится наша фотогалерея:

<div>
 <ul>
 <li><a href="images/main_image1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li>
 <li><a href="images/main_image2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li>
 <li><a href="images/main_image3.jpg"><img src="images/thumb3.jpg" alt="" /></a></li>
 <li><a href="images/main_image4.jpg"><img src="images/thumb4.jpg" alt="" /></a></li>
 <li><a href="images/main_image5.jpg"><img src="images/thumb5.jpg" alt="" /></a></li>
 <li><a href="images/main_image6.jpg"><img src="images/thumb6.jpg" alt="" /></a></li>
 <li><a href="images/main_image7.jpg"><img src="images/thumb7.jpg" alt="" /></a></li>
 <li><a href="images/main_image8.jpg"><img src="images/thumb8.jpg" alt="" /></a></li>
 <li><a href="images/main_image9.jpg"><img src="images/thumb9.jpg" alt="" /></a></li>
</ul>
 <div id="main_view">
<img src="images/main_image1.jpg" alt="" /></a>
 </div>
 </div>

<div>

<ul>

</ul>

</div>

Ну вот собственно и все, галерея создана. Как Вы видите при создании галерею ничего сложного и необычного мы не применяли, и при этом у нас получилось сделать невероятно стильную фотогалерею. Надеюсь у Вас все так же получится, удачи Вам.

Пример того как будет выглядеть Фотогалерея на сайте: