Как то раз, одним отличным зимнем вечером, подкинули мне работенку - Сделать кнопку Показать еще на странице фото галереи. После изучения структуры сайта, пришел к выводу, что совершенно не хочу разбираться в данном CMS. Для вывода страниц использовался шаблонизатор Smarty. Возиться с на стороне сервера не хотелось, и поэтому поступил очень хитро. Нашел участок где формируется список фотографий. И поставил условие - если больше 30 то элементам добавляется свойство style="display:none", а пути к изображениям записываются в атрибут data.
{if $smarty.foreach.images.index>29}
{else}
{/if}
И, конечно показываем кнопку Показать еще
{if $ii > 30}
Показать еще
{/if}
На этом на стороне сервера закончили.Теперь редактируем JavaScript
var OIindex = 0;
var OImaxOpened = 30;
var OIcurrent = 0;
var fistLi = 0;
function OpenImages(){
$('.progress_io').addClass('progress_rotate');
OIindex = 0;
$('.io_hiddens_img').each(function(indx, element){
if(OIindex < OImaxOpened){
if(OIindex == 0){
fistLi = OIcurrent;
}
OIcurrent++;
$parent = $(element).parent();
var data = $(element).attr('data');
var src = $(element).html();
console.log(data+src);
$parent.html('<img src="'+src+'" class="cropimages cropimages2 scroll'+fistLi+'" data="'+data+'">');
}
OIindex++;
});
if(OIindex <=OImaxOpened){
setTimeout("$('.icho_image').hide(1000)",1000);
}
setTimeout(OpenImagesScroll,1000);
console.log('OpenImages...');
}
function OpenImagesScroll(){
$('.cropimages2').parents().show(100);
$('.progress_io').removeClass('progress_rotate');
$('html, body').animate({scrollTop: $('.scroll'+fistLi).offset().top-50}, 1000);
}
На этом все. Посмотреть можно на этой странице
http://arthata.by/index.php?fc=module&module=azgallery&controller=gallery&id_album=7
Комментариев нет:
Отправить комментарий