Results 1 to 2 of 2

Thread: Two different sliders with their own navigationpanels

  1. #1
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Two different sliders with their own navigationpanels

    Hi - again

    I've been working on how to put two sliders on one page - with different names on the navigationpanels...

    but it's not working out.
    The problem is, that I have to use this noconflict.js
    Code:
    jQuery.noConflict();
    var $j = jQuery;
    Or else the img bibble effect wont work.

    My problem is - I think - that the $j is not defined ..


    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <meta http-equiv="Content-Type" content="cache" />
    <meta name="robots" content="INDEX, FOLLOW" />
    <meta name="keywords" content="ENTER KEYWORD" />
    <meta name="description" content="ENTER DESCRIPTOPN HERE" />
    
    
    <title>BLOGGEN</title>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider/jquery.easing.1.2.js"></script>
    <script type="text/javascript" src="js/noconflict.js"></script>
    
    <script type="text/javascript" src="js/slider/slider.js"></script>
    <script src="js/slider/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    
    <link rel="stylesheet" href="css/slider/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider/anythingslider.css" type="text/css" media="screen" />
    
    
    
    
    
    <!-- Anythingslider -->
    <script type="text/javascript">
    
    var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
    function formatText(index, panel) {
    	return slider1[index - 1] || index;
    }
     
    
    </script>
    
    
    <!-- /*****SCRIPT FOR BUBBLE****/ -->
    <LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles.css">
    <LINK rel=stylesheet type=text/css href="css/topmenu/bubbles.css">
    
    
    
    
    <script type="text/javascript" src="js/topmenu/imgbubbles.js">
    /*****SCRIPT FOR BUBBLE****/
    /***********************************************
    * Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    </script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    	$('ul#orbs').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs"
    	$('ul#orbs_2').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs_2"
    })
    </script>
    
    </head>
    
    
    
    <body>
    <div id="fb-root"></div>
    
    
    <div id="space" class="border">
    <div id="paper">
    	
     
        
        <div id="banner" align=center> 
    		<img src="images/layout/banner.png" />
        </div>
    
    
        <div id="menu" align="center">
    		<UL id=orbs class=bubblewrap>
    		<LI>
    			<A href="/dw.html"><IMG alt=HJEM src="images/layout/topmenu/hjem.png"></A>
                
           	</LI>
    		
            <LI>
                <A href="/om_mig.html"><IMG alt="OM MIG" src="images/layout/topmenu/ommig.png"></A>
                
    		</LI>
            
            <LI>
                <A href="/galleri.html"><IMG alt=GALLERI src="images/layout/topmenu/galleri.png"></A>
                
            </LI>
            
            <LI>
                <A href="/portefolio.html"><IMG alt=PORTEFOLIO src="images/layout/topmenu/portefolio.png"></A>
                
            </LI>
            
            <LI>
                <DIV><A href="/blog.html"><IMG alt=BLOG src="images/layout/topmenu/blog.png"></A>
                </DIV>
            </LI>
    		</UL>
        </div>
    
    
    
    
        
    <div id="page-wrap">
    
    <!-- AnythingSlider #1 -->
    <ul id="slider1">
    
    <li class="panel1">
    <div >
    <p>Denne scrollbar er simpel at bruge og kr&aelig;ver ikke billeder.
            
            </p>
            	     
           	  
    </div>
    </li>
    
    <li class="panel2">
    <div class="quoteSlide">
    <blockquote>In </blockquote>
    </div>
    </li>
    
    <li class="panel3">
    <img src="images/slider/slide-tele-1.jpg" alt="" />
    </li>
    
    <li class="panel4">
    <div class="quoteSlide">
    <blockquote>Life is conversation.</blockquote>
    <p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
    </div>
    </li>
    
    <li class="panel5">
    <img src="images/slider/slide-tele-2.jpg" alt="" />
    </li>
    
    </ul> <!-- END AnythingSlider #2 -->
    
    
    </div>
    
    <div id="page-wrap">
    
    <!-- AnythingSlider #1 -->
    <ul id="slider2">
    
    <li class="panel1">
    <div >
    <p>Denne scrollbar 
            </p>
            	 
    </div>
    </li>
    
    <li class="panel2">
    <div class="quoteSlide">
    <blockquote>In awe Les Dawson</blockquote>
    </div>
    </li>
    
    <li class="panel3">
    <img src="images/slider/slide-tele-1.jpg" alt="" />
    </li>
    
    <li class="panel4">
    <div class="quoteSlide">
    <blockquote>Life is conversation.</blockquote>
    <p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
    </div>
    </li>
    
    <li class="panel5">
    <img src="images/slider/slide-tele-2.jpg" alt="" />
    </li>
    
    </ul> <!-- END AnythingSlider #2 -->
    
    
    </div>
    
        <div id="footer">
    		<p class="footer-text">Copyright by MD - Latest update april, 2012</p>
        </div>
    
    </div>
    </div>
    
    </body>
    </html>
    SLIDER.JS:
    Code:
    jQuery.noConflict()(function(){
    
    
    $j('#slider1').anythingSlider({
    easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
    autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
    startStopped: false, // If autoPlay is on, this can force it to start stopped
    delay: 3000, // How long between slide transitions in AutoPlay mode
    animationTime: 600, // How long the slide transition takes
    hashTags: true, // Should links change the hashtag in the URL?
    buildNavigation: true, // If true, builds and list of anchor links to link to each slide
    pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
    startText: "Start", // Start text
    stopText: "Stop", // Stop text
    navigationFormatter: formatText, // Details at the top of the file on this use (advanced use)
    forwardText: "&raquo;", // Link text used to move the slider forward
    backText: "&laquo;", // Link text used to move the slider back
    buildArrows: false, // If true, builds the forwards and backwards buttons
    resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
    width: 700, // Override the default CSS width
    height: 300
    });
    
    $j('#slider2').anythingSlider({
    easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
    autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
    startStopped: false, // If autoPlay is on, this can force it to start stopped
    delay: 3000, // How long between slide transitions in AutoPlay mode
    animationTime: 600, // How long the slide transition takes
    hashTags: true, // Should links change the hashtag in the URL?
    buildNavigation: true, // If true, builds and list of anchor links to link to each slide
    pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
    startText: "Start", // Start text
    stopText: "Stop", // Stop text
    navigationFormatter: formatText, // Details at the top of the file on this use (advanced use)
    forwardText: "&raquo;", // Link text used to move the slider forward
    backText: "&laquo;", // Link text used to move the slider back
    buildArrows: false, // If true, builds the forwards and backwards buttons
    resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
    width: 700, // Override the default CSS width
    height: 300
    });
    
    
    $j("#slide-jump").click(function(){
    $j('.anythingSlider').eq(1).anythingSlider(4);
    return false;
    });
    
    });

    Thanks
    Last edited by Mejse78; 05-06-2012 at 03:30 PM. Reason: Might have found something...

  2. #2
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default solution

    Code:
    <script>
    $(function(){
       var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'],
          slider2 = ['jul', 'aug', 'sept', 'Quote #3', 'Image #3'];
    
      $j('#slider1').anythingSlider({
        easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false, // If autoPlay is on, this can force it to start stopped
        delay: 3000, // How long between slide transitions in AutoPlay mode
        animationTime: 600, // How long the slide transition takes
        hashTags: true, // Should links change the hashtag in the URL?
        buildNavigation: true, // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start", // Start text
        stopText: "Stop", // Stop text
        navigationFormatter: function(index, panel){ // Details at the top of the file on this use (advanced use)
          return slider1[index - 1] || index;
        },
        forwardText: "&raquo;", // Link text used to move the slider forward
        backText: "&laquo;", // Link text used to move the slider back
        buildArrows: false, // If true, builds the forwards and backwards buttons
        resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
        width: 700, // Override the default CSS width
        height: 300
      });
    
      $j('#slider2').anythingSlider({
        easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false, // If autoPlay is on, this can force it to start stopped
        delay: 3000, // How long between slide transitions in AutoPlay mode
        animationTime: 600, // How long the slide transition takes
        hashTags: true, // Should links change the hashtag in the URL?
        buildNavigation: true, // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start", // Start text
        stopText: "Stop", // Stop text
        navigationFormatter:  function(index, panel){ // Details at the top of the file on this use (advanced use)
          return slider2[index - 1] || index;
        },
        forwardText: "&raquo;", // Link text used to move the slider forward
        backText: "&laquo;", // Link text used to move the slider back
        buildArrows: false, // If true, builds the forwards and backwards buttons
        resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
        width: 700, // Override the default CSS width
        height: 300
      });
    
      $j("#slide-jump").click(function(){
        $j('.anythingSlider').eq(1).anythingSlider(4);
        return false;
      });
    
    });
    </script>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •