Friday, February 2, 2018

How to invoke large number of images in slick JS slider or dynamic in PHP?

Hey All,

I have made custom function of slick slider to load dynamically using AJAX process to append into  slider item automatically. its  large  number of records  processing in chunk split from your database base on counter in every request. good to know its loading within a second of initials page loading process.


Please follow the below step and do not copy fully code take the business logic from here and implement it your application.
--------------------------------------------------------------------------------------
Step1 : Create slider.php

<link rel="stylesheet" type="text/css" href="css/slick.css" />
<script type="text/javascript" src="js/slick.min.js"></script>

<div class="logo_list_ajax logo_display" id="logo_display" style="margin-top: 15px;">
<!-- Item  array contains logo and title from db-- total load 14 items for two row of slide>
<?php  foreach($items as $logo)  {?>

<div class="item">

<a title="<?php echo $logo->organization_name;?>" target="_blank" onclick="ga('send', 'event', '<?php echo $gaSource;?>', 'Links : <?php echo $logo->organization_name;?>', '<?php echo $url;?>');" href="<?php echo $url;?>">
<img alt="<?php echo $logo->organization_name;?>" title="<?php echo $logo->organization_name;?>" src="<?php echo JPATH_BUILDERS?>images/registeredcompanylogo/<?php echo $logoImage;?>" width='<?php echo $width;?>' height='<?php echo $height;?>' >
</a>

</div>
}?>
</div>

Step 2 : Create an ajax function that take the limit counter increment or  and get data list in JSON from server . it will automatically append to slider list 14item
---------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
var recurseStatus = false;
var html='';
var limitcounter=2;
var bbaseUrl='<?php echo JPATH_URL;?>';
var baseUrl='<?php echo JURI::ROOT();?>';
function logolist(){
var html='';
jQuery.ajax({
url : 'index.php?option=com_registration&task=ajaxItemList',
type: 'POST',
data:{'limitcounter':limitcounter}  ,               
success : function(respond){
limitcounter = limitcounter+1;
var objdata = jQuery.parseJSON(respond);
var data_length = objdata.length;
if(data_length>0){
var blankDivWrapper =jQuery('<div class="slick-slide"></div>');
var blankDiv =jQuery('<div></div>');
var blankDiveven =jQuery('<div></div>');
for (var i = 0,count=1; i < data_length; i++,count++) {
var imgLinkurl=gaSource=rel='';
if(objdata[i]['isMicroSite']==0){
gaSource='Hits on External Links';
rel = 'rel="nofollow"';
imgLinkurl=objdata[i]['company_url'];
}else{
imgLinkurl=baseUrl+'ecosystem/'+objdata[i]['microSiteURL'];
gaSource='Hits on Internal Links';
rel = '';
}
var getimageurl=objdata[i]['csp_logo_image'];
var replaceImage = getimageurl.replace("images/", "");

var gafunc='onclick="ga(\'send\', \'event\', \''+gaSource+'\', \''+objdata[i]['organization_name']+'\', \''+imgLinkurl+'\');"';
html+='<div class="item" style="width: 14.2857%; display: inline-block;">';
html+='<a '+gafunc+rel+' title="'+objdata[i]['organization_name']+'" target="_blank"  href="'+imgLinkurl+'">';
html+='<img id="img_'+objdata[i]['organization_id']+'" alt="'+objdata[i]['organization_name']+'" title="'+objdata[i]['organization_name']+'" src="'+builderbaseUrl+'images/registeredcompanylogo/'+replaceImage+'" ></a></div>';



}
if(recurseStatus){

logolist();
}
}

 
}
});

}
-------------------------------------------------------------------------------------------------------------------
//Call slider delegation of slick JS
jQuery(document).ready(function(){
jQuery(".logo_list_ajax").slick({
          autoplaySpeed:8e3,autoplay:!0,rows:2,
          slidesPerRow:7,fade:!0,infinite:!0,
           speed:1e3,onReInit:null,cssEase:"ease",
           pauseOnHover:!0});
//---------------------------------------------------------------------------------
// On before internalisation of slide change event slider
jQuery(".logo_list_ajax").on('beforeChange', function(event, slick, currentSlide, nextSlide){
if(!recurseStatus){
//one time call  function if even
  recurseStatus = true;
  logolist(true);
}
});
});
</script>
-------------------------------------------Ajax Server Function ajaxItemList-------------------------------------

public function ajaxItemList() {           
          try {
$limit = JRequest::getVar('limitcounter');
$offset=$limit*14;
                 $query="select * from item";
                $db->setQuery($query,$offset,14);
               $list_names = $db->loadAssocList();
            } catch (Exception $e) {
                 $list_names = array();
            }
             echo json_encode($list_names);
             exit;
            }

Finally , You have done large number records to you slider items, it would not taking the loading time to load page initially .

Hopefully it will help you, please comment if any question on this.

No comments:

Post a Comment