• I want to use together:

    nivo slider: http://nivo.dev7studios.com/
    idTabs: http://www.sunsean.com/idTabs/

    Nivo slider is working good when its alone… but when i try to use idTabs… not… Problem is that slider is working only on the first tab… on the second is only “loading” image…

    Here is the image how its look:
    1: tab 1
    2: tab 2

    On the nivo site is:

    The Nivo Slider does support multiple sliders on the same page however you must use jQuery v1.4.0 or greater for it to work.

    i have 1.4.2 version of jQuery

    could someone help me with this?

    here is code which i made in my wordpres files…

    in head soction of header.php is:

    <!-- idTabs -->
    <?php wp_enqueue_script('idtabs', get_bloginfo("template_url") . '/tabs/jquery.idTabs.min.js', array('jquery')); ?>
    
    <!-- nivo slider -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/nivo/nivo-slider.css" type="text/css" media="screen" />
    <script src="<?php bloginfo("template_url"); ?>/nivo/jquery.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo("template_url"); ?>/nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(window).load(function() {
    	$('#slider').nivoSlider({
    		effect:'sliceDown', //Specify sets like: 'fold,fade,sliceDown'
    		slices:25,
    		animSpeed:500,
    		pauseTime:2800,
    		startSlide:0, //Set starting Slide (0 index)
    		directionNav:true, //Next & Prev
    		directionNavHide:true, //Only show on hover
    		keyboardNav:true, //Use left & right arrows
    		beforeChange: function(){},
    		afterChange: function(){},
    		slideshowEnd: function(){} //Triggers after all slides have been shown
    	});
    });
    </script>

    on page.php file is:

    <div class="usual">
      <ul class="idTabs">
        <li><a href="#idTab1" >Strony www</a></li>
        <li><a href="#idTab2"class="selected" >Fotografie</a></li>
      </ul>
      <div id="idTab1">
    			<div id="slider" >
    				<img src="<?php bloginfo("template_url"); ?>/nivo/img/slide4.jpg" alt="" />
    				<img src="<?php bloginfo("template_url"); ?>/nivo/img/slide5.jpg" alt="" />
    				<img src="<?php bloginfo("template_url"); ?>/nivo/img/slide6.jpg" alt="" />
    			</div>
    	</div> 
    
      <div id="idTab2">
    			<div id="slider" >
    				<img src="<?php bloginfo("template_url"); ?>/nivo/img/slide1.jpg" alt="" />
    				<img src="<?php bloginfo("template_url"); ?>/nivo/img/slide2.jpg" alt="" />
    				<img src="<?php bloginfo("template_url"); ?>/nivo/img/slide3.jpg" alt="" />
    			</div>
    	</div>
    </div>

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter yozz84

    (@yozz84)

    someone ?

    Thread Starter yozz84

    (@yozz84)

    could someone help me with this?

    Hey!

    There might be some sort of conflict. Try this version of the script instead:

    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(window).load(function() {
    	jQuery('#slider').nivoSlider({
    		effect:'sliceDown', //Specify sets like: 'fold,fade,sliceDown'
    		slices:25,
    		animSpeed:500,
    		pauseTime:2800,
    		startSlide:0, //Set starting Slide (0 index)
    		directionNav:true, //Next & Prev
    		directionNavHide:true, //Only show on hover
    		keyboardNav:true, //Use left & right arrows
    		beforeChange: function(){},
    		afterChange: function(){},
    		slideshowEnd: function(){} //Triggers after all slides have been shown
    	});
    });
    </script>
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Nivo slider & idTabs on one WordPress theme – working problem’ is closed to new replies.