Новый вид "Новые фотографии" InstantCms

Опубликовано:
Редактировалось: 2 раза — последний вчера в 20:19
Просмотров: 2719
+2
Голосов: 2

Что получилось: 2 блока - в 1 выводились названия фото + миниатюры, при нажатии на них, во втором блоке показывалась большая фотка, внизу название как ссылка на изображение в фото галерею. Фото во втором блоке автоматически подгонялись под его ширину.

Какие изменения нам понадобились:

1. в файл templates.php вашего шаблона вместо кода

<script type="text/javascript">

$(document).ready(function(){

$('#topmenu .menu li').hover(

function() {

$(this).find('ul:first').show();

$(this).find('a:first').addClass("hover");

},

function() {

$(this).find('ul:first').hide();

$(this).find('a:first').removeClass("hover");

}

);

});

</script>

вставляем следующее:

<script type="text/javascript">

$(document).ready(function(){

//Show Banner

$(".main_image .desc").show(); //Show Banner

$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list

$(".image_thumb ul li:first").addClass('active');

$(".image_thumb ul li").click(function(){

//Set Variables

var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image

var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL

var imgDesc = $(this).find('.block').html(); //Get HTML of block

var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block

if ($(this).is(".active")) { //If it's already active, then...

return false; // Don't click through

} else {

//Animate the Teaser

$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {

$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );

$(".main_image img").attr({ src: imgTitle , alt: imgAlt});

});

}

$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists

$(this).addClass('active'); //add class of 'active' on this list only

return false;

}) .hover(function(){

$(this).addClass('hover');

}, function() {

$(this).removeClass('hover');

});

//Toggle Teaser

$("a.collapse").click(function(){

$(".main_image .block").slideToggle();

$("a.collapse").toggleClass("show");

});

});

</script>

2. Не забываем про стили :). В файл style.css добавляем пару строчок (всегда можно настроить под себя):

/* slide image gallery*/

.main_image {

width: 400px;

height: 300px;

float: left;

background: #333;

position: relative;

overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/

color: #fff;

}

.main_image h2 {

font-size: 2em;

font-weight: normal;

margin: 0;

padding: 10px;

}

.main_image p {

font-size: 1.2em;

line-height: 1.6em;

padding: 10px;

margin: 0;

}

.block small { /*--We'll be using this same style on our thumbnail list--*/

font-size: 1em;

padding: 0 0 0 20px;

background: url(icon_calendar.gif) no-repeat 0 center;

}

.main_image .block small {margin-left: 10px;}

.main_image .desc{

position: absolute;

bottom: 0;

left: 0; /*--Stick the desc class to the bottom of our main image container--*/

width: 100%;

display: none; /*--Hide description by default, if js is enabled, we will show this--*/

}

.main_image .block{

width: 100%;

background: #111;

border-top: 1px solid #000;

}

.main_image a.collapse { /*--This is our hide/show tab--*/

background: url(btn_collapse.gif) no-repeat left top;

height: 27px;

width: 93px;

text-indent: -99999px;

position: absolute;

top: -27px;

right: 20px;

}

.main_image a.show {background-position: left bottom;}

.image_thumb {

float: left;

width: 330px;

background: #f0f0f0;

border-right: 1px solid #fff;

border-top: 1px solid #ccc;

}

.image_thumb img {

border: 1px solid #ccc;

padding: 2px;

background: #fff;

float: left;

}

.image_thumb ul {

margin: 0;

padding: 0;

list-style: none;

}

.image_thumb ul li{

margin: 0;

padding: 5px 5px;

background: #f0f0f0 url(nav_a.gif) repeat-x;

width: 320px;

float: left;

border-bottom: 1px solid #ccc;

border-top: 1px solid #fff;

border-right: 1px solid #ccc;

height: 38px;

line-height: 38px;

}

.image_thumb ul li.hover { /*--Hover State--*/

background: #ddd;

cursor: pointer;

}

.image_thumb ul li.active { /*--Active State--*/

background: #fff;

cursor: default;

}

html .image_thumb ul li h2 {

font-size: 14px;

margin:0;

padding: 0;

}

.image_thumb ul li .block {

float: left;

margin-left: 10px;

padding: 0;

width: 250px;

}

.image_thumb ul li p{display: none;}

3.Ну и последнее, открываем файл mod_latestphoto.tpl из папки modules вашего шаблона и вместо всего текста вставляем следующий:

<div style="border: 1px solid #ccc; padding:5px; display:inline-block; //display: inline; zoom: 1; margin-left:50px">

<div class="image_thumb">

<ul>{assign var="my" value="1"}

{foreach key=tid item=con from=$photos}

<li>

{if $my=='1'}

{assign var="img_start" value=$con.file}

{assign var="img_t" value=$con.title}

{assign var="img_id" value=$con.id}

{assign var="my" value="0"}

{/if}

<a href="/images/photos/medium/{$con.file}"><img src="/images/photos/small/{$con.file}" alt="{$con.title}" style="height:32px;" /></a>

<div class="block">

<a href="/photos/photo{$con.id}.html"><h2>{$con.title}</h2></a>

</div>

</li>

{/foreach}

</ul>

</div>

<div class="main_image">

<img src="/images/photos/medium/{$img_start}" alt="{$img_t}" width="400px"/>

<div class="desc">

<div class="block">

<a href="/photos/photo{$img_id}.html"><h2>{$img_t}</h2></a>

</div>

</div>

</div>

<div style="clear: both"></div>

</div>

В итоге все должно работать. Модуль стал занимать больше ширины, его лучше выводить в центральные позиции.

В на стройках самого модуля НОВИНКИ ФОТОГАЛЕРЕИ ставим количество фото для вывода 6, так все будет красивей смотреться.

Цвета, размеры вы всегда можете подогнать под себя.

Пока все, спасибо.

design-programming net

Комментарии (0)

Нет комментариев. Ваш будет первым!

Голосуем

Самый нужный компонент