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>
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