Что получилось: 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
