I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work.
However, when adding in another slider, I have only confused the situation.
Below is the html and css. Let me know where I've gone wrong here.
Will I need another set of css classes for each slider?
How do I call a second slider?
The html/javascript:
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.
View 1 Replies View RelatedWhen 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.
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 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;
$(window).load(function() {
$('#slider2').nivoSlider();
});
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.
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.
View 2 Replies View Relateddoes 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).
View 5 Replies View RelatedI have two sliders on the same page. They are both essentially the same pictures, just different sizes of each other. Demo site [url]
How can I make it so that when you click on one image on the bottom, the top slider changes to the picture that was clicked?
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.
Here is the testing url.[url]
I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work here: h[URL]
I was able to follow this: [URL] but then couldn't duplicate it.
I'm trying to create two array's on this page: [URL]
Both array's would be activated by clicking their respective links -- the "I've got more to say" graphic would activate the text array in the bubble.
The "Meet my friends" graphic would activate the image array that changes the picture of the celebrities (ignore the terrible formatting of the 2nd pic).
I'm going to have a relatively large amount of text array variables and probably 5-10 image array variables.
Currently, the meet my friends button changes one image, but then it won't change back and is basically broken. The text array is currently activated by refreshing the page and I can't get that button to work at all.
I am trying to make an image swap to another image, based on two variables.
i.e. Change an image of a blue car with silver wheels to a red car with black wheels.
The variables are the 1. colour of the car and 2. colour of the wheels. The visitor to the page will click on a coloured car icon to swap the image to the correct coloured car and then on a coloured wheel icon to change the wheel colour.
I have pre-prepared jpegs of all of the combinations of car/wheel colour.
Not sure at all about how to do this, or even if Javascript is the right way to go.
I am building a site with ads that I want to rotate positions (this way I can keep it fair for advertisers- the bottom ad rotates up to the top) upon refreshing the page, searching through the site, or each time the user visits. I have three images (sponsor1.jpg, sponsor2.jpg,sponsor3.jpg) that are always displayed vertically in the right banner. I assume this is just a simple javascript slideshow tweaked a bit but can't figure it out.
I find plenty of js scripts that will rotate several images through one image location, but I want image POSITION 1 to start with sponsor1.jpg, image POSITION 2 to start with sponsor2.jpg..and so on... then upon refreshing the page image POSITION 1 is holding sponsor2.jpg, image POSITION 2 is holding sponsor3.jpg... etc
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
I am trying to calculate a value based on two sliders.
This is the code that I am using:
var value1;
var value2;
$(function() {
[Code]....
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;
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
[Code]....
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.
View 2 Replies View RelatedTo 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.
View 1 Replies View RelatedI 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:
Code:
How can I achieve what I need?
Im trying to have a click event that replaces an image on the page with a new image that has been selected randomly from an array. I have solved PART of this already (can get the random image to appear).
However, instead of appearing on the page where the old image was, the new image appears in a blank page.
My research indicates that this blank page location-problem is a result of using document.write in the Function. Therefore, I know I need to find a different way to accomplish this, but am failing miserably.
I have been trying for hours and hours and HOURS to figure out proper syntax for accomplishing this via elements, functions, variables and mootools.
A bit of my research:
-I found this---but havent figured out how to implement it in my scenario:
Source: [url]
-I found this---but havent figured out how to implement it in my scenario:
Code:
Source: [url]
I'm using Javascript to change an image on a page without reloading the page. The problem is that my images are various widths (but identical heights), yet each image I change it to uses the width of the first image.
[Code]...
I have been using Flash to create a slide show that starts with a single image. Then the image caption slides up from the bottom followed by a longer description coming in from the right side of the image (which includes links in the text). The description and caption then slide away, and a new image is transitioned into the old image's place. Is it possible to create something like this with jQuery? The s3slider jQuery plugin is very similar to what I'm looking for, but I can't seem to get two captions to appear over the same image.
View 1 Replies View RelatedI was trying to apply 2 javascript effects on one image. First, I use this Jquery effect on the image. It works like it should until I put in the light box effect (this is the one I am using. The lightbox also works, it just depends on which order I put them in the code on which one will come through.I am relatively new to javascript and I am learning as I go along. Below I inserted part of my code geared towards these two effects. I know I have everything else in the code correct (the body) because they work individually, just not put together (or maybe I have to put a line of code in the body to enable it to work?).Essentially, I want the image to be dulled out when the visitor opens the page, get brighter when they roll over it, then trigger the lightbox when they click on it.The easy option would be to use an image swap for the dull/bright mouseOver effect; however, I like the way it is done by tutorialhero.CODE
<script type="text/javascript" src="javascript/lightbox/prototype.js"></script>
<script type="text/javascript" src="javascript/lightbox/scriptaculous.js?load=effects,builder"></script>
[code].....
Using a UI dialog I'd like to load in 10 or so images. Each would be unique and after you click on one the following needs to happen:
1. Image appears on the parent page in a specified ID.
2. A "hidden" field is updated so that when the user submits the db is updated with their selection.
3. Dialog closes automatically.
That's it. Basically it would work similar to "datepicker".I'm using the latest 1.4 and ui and been making great progress as learning basics. I need to do the above and it seems like such a no brainier and or it should already exist but after 2 days of searching and trial and error...
I'm newbie on jquery and I hope to help me. i'vea problem to showmultiple stack image. For example, I've a jpeg image map on background and I would like to show multiple pin with multiple coordinates.
View 1 Replies View RelatedI have a hidden popup that I populate with content and it dynamically expands to the size of the content. I then show the popup. When a user clicks on another link, it populates the popup with longer or shorter content. When the content is SHORTER, it seems to show the background image that I'm using expanding to the height of the previous size of the popup. I've tried setting the height manually with JS, no luck. This only happens on IE6.
View 1 Replies View Related