Two different sliders with their own navigationpanels

**Mejse78** · 05-06-2012, 08:16 AM

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

**Mejse78** · 05-06-2012, 03:30 PM

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>

Thread: Two different sliders with their own navigationpanels

Thread Tools

Search Thread

Two different sliders with their own navigationpanels

solution

Bookmarks

Bookmarks

Posting Permissions