Как то раз, одним отличным зимнем вечером, подкинули мне работенку - Сделать кнопку Показать еще на странице фото галереи. После изучения структуры сайта, пришел к выводу, что совершенно не хочу разбираться в данном CMS. Для вывода страниц использовался шаблонизатор Smarty. Возиться с на стороне сервера не хотелось, и поэтому поступил очень хитро. Нашел участок где формируется список фотографий. И поставил условие - если больше 30 то элементам добавляется свойство style="display:none", а пути к изображениям записываются в атрибут data.
Теперь редактируем JavaScript
На этом все. Посмотреть можно на этой странице
http://arthata.by/index.php?fc=module&module=azgallery&controller=gallery&id_album=7
{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
Комментариев нет:
Отправить комментарий