PDA

View Full Version : 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...
http://i1086.photobucket.com/albums/j447/Mejse78/Untitled-2.gif
but it's not working out.
The problem is, that I have to use this noconflict.js

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:

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

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