Jump to content

Recommended Posts

Hi everyone!

 

I'm trying to modify a module which has some tabs, in each tab the module loads the content with ajax and I want the content be shown as a carrousel.

 

For that I'd use bxslider as the carrousel.

 

The point is that when I change between tabs, I'm not able to set the bxslider (carrousel) again..

 

I've tried to load the carrousel in the success function of the ajax call but with no luck..

 

I paste my code in here so if somebody knows what I'm doing wrong could explain to me:

{assign var="moduleclass_sfx" value=( isset( $SNSPRT_CLASSSFX ) ) ?  $SNSPRT_CLASSSFX : ''}

<div id="sns_producttabs" class="tabajax sns-producttabs mrb25 {$moduleclass_sfx}">
	{*
	{if $SNSPRT_TITLE}
		<h3 class="block-title">{$SNSPRT_TITLE|escape:'htmlall':'UTF-8'}</h3>
	{/if}
	*}
	 {include file="./tabs.tpl"}
         <div class="navigation">
            <span class="next"><span></span></span>
            <span class="prev"><span></span></span>
        </div>
	{if $SNSPRT_PRETEXT}
		<div class="pretext">
			{$SNSPRT_PRETEXT}
		</div>
	{/if}
	 <div class="sns-pdt-container tab-content">
		{foreach $tabs as $item}
			 {assign var="tab_content_active" value=( isset( $item.first_select ) ) ?  $item.first_select : ''}
			 {assign var="products" value=(isset($item.child))?$item.child:''}
			<div class="tab-content-inner tab-content-{$item.tab_unique} {$tab_content_active}">
				{if !empty($products)}
					{if $products == 'emptyproduct'}
						<p class="alert alert-info">{l s="There are no products matching to show."}</p>
					{else}
						{include file="./items.tpl"}
                                                
					{/if}
				{else}
					<div class="process-loading"></div>
				{/if}
				{assign var="cls_loaded"  value=($item['count'] < $SNSPRT_NUMDISPLAY) ? " loaded " : ""}
				{assign var="label"  value=($item['count'] < $SNSPRT_NUMDISPLAY) ? "All ready" : "Load more"}
                                <div class="button-load">
					<div class="tab-loadmore pdt-loadmore"
						 data-id="{$item.tab_unique}" data-catid="{$item.tab_catid}" data-type="{$item.tab_type}"
						 data-rl_start="{$SNSPRT_NUMDISPLAY}"
						 data-rl_total="{$item['10']}"
						 data-rl_allready="All Ready"
						 data-rl_load="{$SNSPRT_NUMLOAD}">
						 <div class="btn-loadmore">
							<div class="ltabs-loadmore-btn {$cls_loaded}" data-label-load="{$label}"></div>
						 </div>
					</div>
				</div>
			</div>
		{/foreach}
	 </div>
	<script type="text/javascript">
            
            var slider = $('#sns_producttabs div.products-grid').bxSlider({
                            useCSS: false,
                            minSlides: 2,
                            maxSlides: 4,
                            slideWidth: 200,
                            infiniteLoop: true,
                            hideControlOnEnd: true,
                            pager: true,
                            autoHover: true,
                            controls: true
                        });
            
		jQuery(document).ready(function ($) {

                //slider.destroySlider();
                //slider.bxSlider();
                //slider.reloadSlider();
                
			function setAnimate(el){
				$_items = $('.item-animate',el);
				$('.button-load',el).fadeOut('fast');
				$_items.each(function(i){
					$(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
			                + "-moz-animation-delay:" + i * 300 + "ms;"
			                + "-o-animation-delay:" + i * 300 + "ms;"
			                + "animation-delay:" + i * 300 + "ms;");
			        if (i == $_items.size() -1) {
			            $(".product_list", el).addClass("play");
			            $('.button-load', el).fadeIn(i*0.3);
			        }
				});
			}
			function setAnimated(el){
			    $(".product_list", el).removeClass("play");
			    $('.item',el).removeAttr('style');
				$('.item',el).addClass('animated').removeClass('item-animate');
			}
			function removeAnimate(el){
			    $(".product_list", el).removeClass("play");
			    $('.item',el).removeClass('animated').addClass('item-animate').removeAttr('style');
			}
			setAnimate($('.tab-content-inner.active'));
		    ;(function (el) {
				var $el = $(el), $tab = $('.tab', $el),
					$tab_content = $('.tab-content',$el),
					$tab_content_inner = $('.tab-content-inner', $tab_content);
                                                                                
					$tab.on('click.tab_cat', function () {
						var $this = $(this);
						if ($this.hasClass('active') ) {
                                                    return;
                                                }
						
						removeAnimate($tab_content);
						slider.destroySlider();
						$tab.removeClass('active');
						$this.addClass('active');
						var id_tab = $this.attr('data-id'), $tab_content_active = $('.tab-content-'+id_tab, $el);
						$tab_content_inner.removeClass('active');
						$tab_content_active.addClass('active');
						var $loading = $('.process-loading', $tab_content_active);
						var loaded = $tab_content_active.hasClass('ltabs-items-loaded');
                                                                                                
						if (!$this.hasClass('tab-loaded') && !$this.hasClass('tab-process')) {
                                                    
							$this.addClass('tab-process');
							$loading.show();
							ajax_url = baseDir + 'modules/snsproducttabs/snsproducttabs-ajax.php';
							$.ajax({
								type: 'POST',
								url: ajax_url,
								data: {
									module_name: 'snsproducttabs',
									is_ajax: 1,
									ajax_start: 0,
									categoryid: $this.attr('data-catid'),
									data_type: $this.attr('data-type')
								},
								success: function (data) {
									if (data.productList != '') {
										$(data.productList).insertBefore($('.button-load',$tab_content_active)); 
										$this.addClass('tab-loaded').removeClass('tab-process');
										$loading.remove();
										setAnimate($tab_content_active);
                                                                                
                                                                                
									} else {
										$('<p class="alert alert-info">{l s="There are no products matching to show."}</p>').insertBefore($('.button-load',$tab_content_active)); 
										$('.button-load', $tab_content_active).remove();
										$loading.remove();
									}
								},
								dataType: 'json'
							});
						}else{
							setAnimate($('.tab-content-inner.active', $el));
						}
					});
					var $btn_loadmore = $('.ltabs-loadmore-btn ', $el);
					$btn_loadmore.on('click.loadmore', function () {
						var $this = $(this);
						if ($this.hasClass('loaded') || $this.hasClass('loading')) {
							return false;
						} else {
                                                                                                        
							$this.addClass('loading');
							$this.parents('.button-load').addClass('loading');
							$this.attr('data-label-load', 'Loading....');
							var tab_content_active = $this.parents('.tab-content-inner').filter('.active');		
							$('.item', tab_content_active).addClass('animated').removeClass('item-animate');

							ajax_url = baseDir + 'modules/snsproducttabs/snsproducttabs-ajax.php';
							$.ajax({
								type: 'POST',
								url: ajax_url,
								data: {
									module_name: 'snsproducttabs',
									is_ajax: 1,
									ajax_start: $this.parents('.pdt-loadmore').attr('data-rl_start'),
									categoryid: $this.parents('.pdt-loadmore').attr('data-catid'),
									data_type: $this.parents('.pdt-loadmore').attr('data-type'),
									nbload: $this.parents('.pdt-loadmore').attr('data-rl_load')
								},
								success: function (data) {
									if (data.productList != '') {
										$(data.productList).children().insertAfter($('.product_list > .item', tab_content_active).nextAll().last());
										updateStatus(tab_content_active);
										setAnimate(tab_content_active);
									}
								}, dataType: 'json'
							});
						}
						return false;
					});
					
					function updateStatus($el) {
						var $btn_loadmore_r = $('.button-load', $el);
						var $btn_loadmore = $('.ltabs-loadmore-btn ', $el);
						$btn_loadmore.removeClass('loading');
						$btn_loadmore_r.removeClass('loading');
						var countitem = $('.product_list > .item', $el).length;
						$btn_loadmore.parents('.pdt-loadmore').attr('data-rl_start', countitem);
						var rl_total = $btn_loadmore.parents('.pdt-loadmore').attr('data-rl_total');
						var rl_load = $btn_loadmore.parents('.pdt-loadmore').attr('data-rl_load');
						var rl_allready = $btn_loadmore.parents('.pdt-loadmore').attr('data-rl_allready');
                                                
						if (countitem >= rl_total) {
							$btn_loadmore.addClass('loaded');
							$btn_loadmore_r.addClass('loaded');
							$btn_loadmore.attr('data-label-load', 'All ready');
						}else{
							$btn_loadmore.attr('data-label-load', 'Load more');
						}
					}
			})('#sns_producttabs');	
		});
	</script>
</div>
{if $SNSPRT_POSTEXT}
	<div class="posttext">
		{$SNSPRT_POSTEXT}
	</div>
{/if}

When a new tab is loaded I also have to destroy the previous bxslider

 

 

Thanks in advance!

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More