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