I am trying to use a program called WOW Slider, found at [URL] It's supposed to create a slider pretty easily.
I can get the slider to work great on my local machine, but when I uploaded it to my host server, it does not work.
Obviously I do not have things in the correct directories?
I have a test page of my output that's live, that you can see.
I'm asking a lot, but this slider was the icing on the cake for a site redesign that I've been working on for months. I'm sad that I have hit a glitch this close to launching. Grrr.
The script works if the images are stored within the HTML but when I try to store them in the JS array, it fails. Is there any way to store the images in JS with this script?
take a look at this link for me? For some reason this works perfectly in everything but IE.I am sure there is some simple fix for this alignment issue, I just can't figure it out
It's like for page top area where you can have multiple pictures and at the sides you have vertical text links to slide in that next image. Image explains. If you have seen this and know it's name
Trying to set up a simple slider and it works perfectly in everything but IE. Every time I reset the x/y coordinates it looks different in every browser.
I created that function for an image slider: $(document).ready(function(){ $("#gallery").click(function(){ $(this).find("li.third").fadeOut(800).removeClass("third").next().addClass("third").fadeIn(800); $(this).find("li.second").fadeOut(800).removeClass("second").next().addClass("second").fadeIn(800); $(this).find("li.first").next().addClass("first").fadeIn(800); $($(this).find("li.first")[0]).removeAttr("class").hide().appendTo($(this)).fadeIn(800); }); });
Actually I want to fade in the first picture first. Than the second and at the end the third. To achieve that I changed the order of these following three lines: $(this).find("li.first").next().addClass("first").fadeIn(800); $(this).find("li.second").fadeOut(800).removeClass("second").next().addClass("second").fadeIn(800); $(this).find("li.third").fadeOut(800).removeClass("third").next().addClass("third").fadeIn(800);Unfortunately it doesn't work.
I have a working version of a jQuery image slider that can be seen here. I am trying to implement this into a new website and have copied the code exactly but for some reason the images are not rotating or switching when the thumbnails are clicked. The new slider can be see here - I have it in a test page so that there is no possibility of any other scripts conflicting.
The script is written in Jquery, it's a simple piece of code which I've seen on another website here [URL]. I modified the code a bit to work with a website I made for my portfolio. The problem with the code is that is works fine in firefox but it doesn't on chrome. the code doesn't break entirely but on chrome the images doesn't slide, it just jumps from image to image. here's the code
Code: var settings = { startingPosition : 0, //--------------------------------set starting position for images, 0 for first image slideSpeed : 550, //---------------------------speed of slide, seconds/fast/slow easing : 'linear', //-------------------------easing type navigationClass : 'slider_navigation', //--------------class of navigation (the prev and next) activeItemClass : 'slider-current-active-element', //--name of class to be added to first element repeat : true, //-----------------------------make gallery neverending .....
Most of it works fine but I'm guessing the animate part in the problem Code: //the slide animation elContainer.animate({ 'marginLeft' : animateToWidth }, opt.slideSpeed, opt.easing, function(){ //if forward is clicked if(opt.repeat && direction == 'forward'){ $("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400); elPosition += imgWidth; elContainer.css({ 'marginLeft' : elPosition });}
Here's the dummy site I made [URL]. I'm no expert on javascript so how to make the code better?
I have a client request I need a little advise on with an image slider.Client says;"There will be 4 photos that roll over two times each then stop on the Home Page photo then opens a text box over the left of the image"The part I'm not sure how to do is how to set the slider to stop on the Home Page image after the 4 images go through the animation two times.
I'm using this jQuery slider code that my coworker and I manipulated so that 3 images slide at a time. It worked great till we updated our jQuery to 1.6.2 from 1.3.2 (we were going to go with 1.7.1 but now that we've encountered this problem we have to hold off). I went all the way back to 1.4.1 and it works okay but not as bad as the latest versions.
I included ALL the code. You can literally copy this whole thing into a blank page, save it and test it. It's not really working as expected right now. It doesn't slide all the way back to 1 and there's an empty slide after 9. I will work with my coworker to debug it more but I want to know why versions 1.4.3 through 1.7.1 break it.
I have included image slider and lavalamp menu in one of my projects. The problem here is both works well in Firefox. But not working in IE. I have included easing for the jquery.
I am a new designer trying to slog my way into using some of the neat tools available out there. I want to use a image slider I found called InnerFade. [URL]. I am using a ul with <a> and <img> in them and I want it to scroll from pic to pic.. this all seemed so easy when I started but I cannot see where I went wrong..
How to reproduce this effect in something like JQuery? Specifically I'm looking at the hover effects at the top of the page: [URL]. It looks like a custom JS file from their end, but I'd like to find something a little more mainstream that looks and acts very similarly, especially with the easing in and out of images.
I came across this awesome image slider: Thumbnails Navigation Gallery with jQuery. The problem is ..you have to click on "best shots" to see the thumbnail navigation... 1) How do you show this thumbnail navigation straight away on loading the page? (ie "best shots" and other list items dont need to be there) 2) and get the thumbnails show near the bottom of the page? 3) and also get the next image to fade in automatically say after 5 seconds, without having to click on a thumbnail, although one can?
I have created a site that my friends and I are using and Im trying to implement a simple image slider.
I can do this without any issues in its simplest form. The issue though is that there are 10 people posting pictures and the site displays their last 6. What I want to do is create a button after each row that allows the user to scroll through that users pictures, but i dont want to preload all images first as this will make the page slow.
This image shows what I maen - the black arrow would make that particular row scroll right - loading images as it went.
I want to activate an image slider that is placed in a div loaded through an Ajax request. I'm using the JQuery Plugin Anythingslider. I've tried to use code similar to this without success:[URL].. The slide script works if loaded together with main page.But how do I activate a slider placed in a div that has been loaded through an Ajax request?
I've followed an online tutorial and successfully created a gallery with a horizontal slide bar using [very specifically] JQuery versions 1.2.6.js and jquery-ui-full-1.5.2.min.js (since otherwise, it does not seem to work).After creating the gallery in the index.html, I decided to put all gallery and slider related scripts into a separate html file to be called with a PHP and ajax script. Here's the problem: While the slider [image] components as well as gallery images [in the slider] loads fine, the slider handler does not work anymore! You can see my problem when you select 'Gallery' from my website. Scroll to the bottom where the horizontal slider is and try moving it. 5%-10% of the time it works, for some odd reason.
I'm not sure what code to show here.. but below are the links I've established to the .js files. With the paths, since the index.html is doing all the calling, I wouldn't have to deal with any '../../*.js' type of paths in order to jump up file levels (this also proven since the images in the gallery are done without '../../' paths).NOTE: ALL of these scripts already work if implemented directly into the index.html. This fails when executed from an external html file
I have a form with two slider on it so the user can select an amount. The slider works fine and passes the values to email ok etc. but when the page is loaded there is "[object Object]" in box of the second slider. I can't find the problem with the code as it is the same for the first slider.
1.I found a Slider Toggle thats demonstrated here [URL] and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used .fader{opacity:0;display:none;} but I wanted the slider div to be visible if javascript was disabled so I added
jQuery(".fader").hide(); so its now <script type="text/javascript"> $(document).ready(function() { jQuery(".fader").hide(); $(".fadeNext").click(function(){ $(this).next().fadeSliderToggle() [Code]...
I'm using a javascript image slider right now, but the first image is the only one, and I want the slider to move to a new <div> instead of a new image. Here is the code I am using:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
