линия

Главная

вторник, 22 декабря 2015 г.

Кнопка "Показать еще" на странице фото галереи

Как то раз, одним отличным зимнем вечером, подкинули мне работенку - Сделать кнопку Показать еще  на странице фото галереи.  После изучения структуры сайта, пришел к выводу, что совершенно не хочу разбираться в данном 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

Комментариев нет:

Отправить комментарий