Доброе время суток.
И так к вашему вниманию хочу предоставить не большой script название которого - Галерея + Портфолио с jQuery
Данный script не имеет не каких сложностей и наворотов он просто как не когда!
И так давайте приступим к установке данной модификации
Установка
И так в то месте где хотите видеть ставим между <head> и </head>
Код
<script type="text/javascript" src="http://dedicated.3dn.ru/uCoz/galereya/jquery-hover-effect.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
//Изображение Hover
jQuery(document).ready(function(){
jQuery(function() {
jQuery('ul.da-thumbs > li').hoverdir();
};);
};);
</script>
Если у вас стоит библиотека не jquery-v1.7.1 то ставим здесь же
Код
<script type="text/javascript" src="http://dedicated.3dn.ru/uCoz/galereya/jquery-v1.7.1.js"></script>
Далее в то месте где хотите видеть функционал ставим между <body> и </body>
Код
<div class="image_grid portfolio_4col">
<ul style="height: 495px;" id="list" class="portfolio_list da-thumbs"><li>
<img src="images/portfolio1.jpg" alt="img">
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>Встречаем 2013 год</h3>
<em>Счастливый</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio1.jpg"></a></span>
</article>
</li><li>
<img src="images/portfolio2.jpg" alt="img">
<article class="da-animate da-slideFromTop" style="display: block;">
<h3>Стиль жизни</h3>
<em>Прекрасный</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio2.jpg"></a></span>
</article>
</li><li>
<img src="images/portfolio3.jpg" alt="img">
<article class="da-animate da-slideFromLeft" style="display: block;">
<h3>Живи музыкой</h3>
<em>это что то</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio3.jpg"></a></span>
</article>
</li><li>
<img src="images/portfolio4.jpg" alt="img">
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>Мода</h3>
<em>Украина</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio4.jpg"></a></span>
</article>
</li><li>
<img src="images/portfolio5.jpg" alt="img">
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>Ты пробывал?</h3>
<em>Так жить..</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio5.jpg"></a></span>
</article>
</li><li>
<img src="images/portfolio6.jpg" alt="img">
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>Будь с нами</h3>
<em>на связи</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio6.jpg"></a></span>
</article>
</li><li>
<img src="images/portfolio7.jpg" alt="img">
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>Море это</h3>
<em>прекрасно</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio7.jpg"></a></span>
</article>
</li><li>
<img src="images/portfolio8.jpg" alt="img">
<article class="da-animate da-slideFromLeft" style="display: block;">
<h3>Живи</h3>
<em>Наслаждайся</em>
<span class="link_post"><a href="http://site.ru"></a></span>
<span class="zoom"><a href="images/portfolio8.jpg"></a></span>
</article>
</li>
</ul>
</div>
Далее после скаченного архива вы заливаете все к себе на сервер. Скачать архив!
И радуетесь результату!
Спасибо за ваше внимание! Если есть какие-то идеи то пишите нее стесняйтесь постараемся выполнить!
)))