I have a Nivo slider on each page of a site. The first page I put it on works fine, any other slider will not work the area that should be the slider simply appears as a block of colour.I initially thought that changing the id's would make no difference as each slider is on a separate page but decided to give it a go anyway as I had no other idea as to what it might be causing the problem.So, I have tried renaming the id's of the subsequent sliders (i.e #slider2 etc) and changing the call to the function at the bottom of the page to match this for example;
and also adding these id's to the CSS to ensure the styles are applied to the new id's but nothing seems to work see here [URL] Ignore the rest of the pages I have not implemented the slider on these yet.
When it comes to JavaScript, I am implementing a couple of Coda sliders onto a site, and as far as I am aware, you can have two sliders on one page, but for me this isn't working.
The effect is using jQuery, and the page can be found here: [url]
The first slider works well, but the second doesn't load properly.
Slider CSS: /* * jQuery Nivo Slider v2.3 * [URL] * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * [URL] * * March 2010 */ .....
The test site is here [URL]. For some reason I just can't get it to work.
I'm messing a lot with the issue but it is driving me nuts Issue is, I'm applying Nivo Slider on 3 instances. It works fine on 2 but not 3rd. If I apply the Nivo Slider on 2 instances then it works fine for 1 but not for 2nd. So Strange.
I am working on a project. I have to put up a tab panel of four option. And in each tab i have to put an image slider. I have used many plugins for this. Tried different plugin for different tab. Few times have problem with tab panel and few time compatibility with all browsers have been issue.
I'm trying to set up a page that has one big image slider that displays a set of images by default. Then underneath this there are links for more galleries, and when you click on them they load right there in the big image slider. I don't want these links to go to a new page. What I'm after is demonstrated at this URL: First Comes Love **|** Wedding Photography by Alison Bank
How do I set this up? I'm thinking I need some kind of preload images code?
I am considering using Nivo Slider, but open to suggestions. Also, I'm building my site in Wordpress if that has any impact.
I use Serif WebPlus X5 to design my website and found that the datepicker tool is perfect for my needs. However, I need six different datepickers on the same page working independently of each other for purposes of reserving one or more of 6 different day activities.
Getting a single datepicker to work on the page was easy enough. I copied and pasted the remaining 5 but the trouble now is to get the coding right for each one to work on its own. I know where and how to change the code of the page, I just don't know which code and what to insert or change.
I am very new to JQuery and I honestly don't know much about JavaScript programming either. I have setup this website and in it I use 2 plugins: 1) A scrollbar plugin (jquery custom content scroller) 2) easy slider (Easy Slider 1.7) The scrollbar plugin worked just fine but when I tied in the JQuery for easy slide, the scrollbar plugin stoped working. I am pretty sure that the problem is related to the 2 different JQuery versions that I try to bind in, or is it?.
Im using nivo slider and I want to have 5 images instead of the general 4 it uses.
However I have added my 5th image as the last on to be display. Once it has shown this image it doesn't loop back to the first image again. It loops to the 2nd one. Has anyone got any idea what I need to change so that it loops to the first slide again?
Ive tried adding HTML captions to see if this is what it uses to see how many slides there is, ive tried editing the total slides from 0 to 4 & 5. But still no luck :(
Everything was fine with my Nivo slider using jQuery 1.5.1.....as soon as I linked to 1.6......it added an inline element size of 1px in height and width to my slider and basically made the slider disappear. I have a width and height specified in the CSS, but it gets overwritten by the jQuery. As soon as I link back to 1.5.1, it works normal again.
I can't seem to get the PNG background fix for IE6 to work for Nivo Slider. I'm using IE PNG Fix - TwinHelix and I've got iepngfix.htc and blank.gif in my CSS folder. iepngfix.htc points to blank.gif like this: IEPNGFix.blankImg = thisFolder + 'blank.gif';. In my nivo-slider.css I've got
I'm not sure if this is a Javascript or a CSS issue, but I'm running into trouble with the Nivo Slider, which uses the jQuery library: [URL]
This is the page I'm having trouble with: [URL]
If you click the right arrow, after about three clicks, it gets stuck and won't scroll to the right anymore. I widened the controlnav div but it doesn't do anything. what may be making it malfunction?
I'm looking to implement 2 different sliders on a page. the test page is [code] the main picture besides the passion leadership is jquery and does not move on this page however on every other page where that is the only slider it works.Now on this index2.php page you can see i put a slider in for a scrolling banner underneath the main banner and it works fine.Is there a way that I can have the 2 work hand in hand.
Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from [url]
The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference.
The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken.
does anyone know a good online resource that shows you how to do image sliders on a web page? For example, I have a image and a arrow (image) above this and the position of the arrow is dependent on a value (which I have).
I have used the Nivo Slider on my website: [URL]. It displays just fine on Firefox but not on IE9, it displays it as if all the images are stacked on top of one another going down the page, but the images don't actually display. Only when I turned on compatibility view on IE9 that the page works properly. I have tried placing the javascript: Code: <script src="[URL]" type="text/javascript"></script> <script src="[URL]" type="text/javascript"></script> <script src="[URL]" type="text/javascript"></script>
Between the <head> tags but then it doesn't load. It only loads if I add them into the page. Above my slider: Code: <div id="slider" style="width: 400px ! important; height: 300px ! important;"><img src="[URL]frontpage1.jpg" border="0" alt="frontpage1" /> <img src="[URL]frontpage2.JPG" border="0" alt="frontpage2" /> <img src="[URL]frontpage3.jpg" border="0" alt="frontpage3" /> <img src="[URL]frontpage4.jpg" border="0" alt="frontpage4" /> <img src="[URL]frontpage5.jpg" border="0" alt="frontpage5" /><img src="[URL]frontpage6.jpg" border="0" alt="frontpage6" /><img src="[URL]frontpage7.jpg" border="0" alt="frontpage7" /><img src="[URL]frontpage8.jpg" border="0" alt="frontpage8" /><img src="[URL]frontpage9.jpg" border="0" alt="frontpage9" /><img src="[URL]frontpage10.jpg" border="0" alt="frontpage10" /></div>
I am using Nivo Slider, a jquery image slider on my site Lykka.se. It works fine in all browsers except IE. In this browser an error alert appears stating 'Stack overflow at line: 881'. I am including the following scripts related to the slider in the page: jquery-1.3.2.noConflict.min.js jquery.nivo.slider.pack.js
The following script is included inside the <head>-section of the page: Code: <script type="text/javascript"> jQuery(window).load(function() { jQuery('#slider').nivoSlider({ effect:'random', slices:15, animSpeed:500, pauseTime:3000, startSlide:0, //Set starting Slide (0 index) directionNav:true, //Next and Prev directionNavHide:true, //Only show on hover controlNav:true, //1,2,3... keyboardNav:true, //Use left and right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){} //Triggers after all slides have been shown }); }); </script>
And finally this is the html-code I am using: HTML Code: <div id="slider-wrapper"> <div id="slider" class="nivoSlider"> <a href="[URL]"><img src="[URL]" alt="" /></a><a href="[URL]"><img src="[URL]" alt="" /></a> </div> </div>
Really struggling trying to get 2 seperate sliders to work on my web page.
take a look at;
[URL]
not a spam its test site so nothing to gain from my end.
the slider at the top works fine, but the 3 boxes with the arrows underneath should scroll/slide back and forward when clicked. If I remove the js links for the top slider the bottom then works;
which isprobablyeasy to tell, but I was hoping someone would be able to answer my question regarding the jquery accordion content sliders or point me in the direction of one that fits my needs.I am wondering if there is an accordion plug in out there that will reveal content based on whether or not you've moused over an image or clicked on it. I've seen a few, but what I have yet to see is one where the button is in a separate div than the content holder.For example, you could have a rotating image you roll over with your mouse and 200 pixels to the right text suddenly appears to define the word image you just rolled over.
To have multiple linked sliders that all share a maximum value, for example, I would have 10 sliders, each set to 50, with a pool of 10 additional points to spend. If I assign all 10 points to 1 slider, the other 9 are locked out, or I could spend 1 point on each slider.
I have 3 sliders on my home page and I would like to make them start one after the other, so 1st would start immediately, then after a short delay the second one, and later the 3rd, so they don't make the transition at the same time. The slider I am using is Avia Slider [url]
Trying this code but they are still running synchronously:
