So I seem to have run into a bit of a dead end. I'm making a page which has an image slider. The slider has three images, one centered on the screen, the other two overflow on the left and right. When you click on the button to advance the slides it runs this code....
$('#slideRight').click(function() {
if ($('.container').is(':animated')) {return false;}
var next=parseInt($('.container img:last-of-type').attr('id')) + 1;
if (next == 12) {
next = 0;
}
var diff = galsize() - 700;
if ($('.thumbs').css("left") == "0px") {
var plus = 78;
} else {
var plus = 0;
}
var app='<img id="' + next + '" src="' + imgs[next].src + '">';
$('.container').width('2800px').append(app);
$('.container').animate({marginLeft: (diff + plus) + "px"}, 300, function() {
$('.container img:first-of-type').remove();
$('.container').width('2100px').css("margin-left", (galsize() + plus) + "px");
});
}); // end right click
This works just fine, not a problem..... I also have an interval set up to run this automatically every 5 seconds to form a slideshow...
var slideShow = setInterval(function() {
$('#slideRight').trigger("click");
}, 5000);
This also works perfectly, not a problem.... However my problem is this.... I have thumbnails, when you click on a thumbnail, it should run this code until the current picture is the same as the thumbnail.... here is the code....
$('img.thumbnail').click(function() {
clearInterval(slideShow);
var src = $(this).attr("src");
while ($('.container img:eq(1)').attr('src') != src) {
$('#slideRight').trigger("click");
}
});
When I click on the thumbnail nothing happens... I've used alert statements to try and debug, what ends up happening is this....
The while loop executes, however nothing happens the first time. The slide is not advanced at all. Starting with the second execution, the is('::animated') is triggered EVERY TIME and the remainder of the slideRight event is not executed...
So my first problem, can anyone shed some light on why it doesn't run the first time?
And my second question, is there any way to wait until the animation is complete before continuing with the loop?
Any help would be appreciated. Thank you!
I'm going to start with the second part of your question, regarding completing the animation before continuing with the loop.
I have done something similar in the past, and what I did was set two global variables to control the animation. One variable is for how long you want the period to be, the other is a counter for how much time since the last loop.
So, for example:
$timeToChange = 5; // in Seconds
$timeSinceReset = 0; // also in Seconds
Set your interval for one second and call a new function (autoAdvance()):
var slideShow = setInterval(function() {
autoAdvance();
}, 1000); // only one second
and then use the counter variable to count each time the interval is called (each second). Something like:
function autoAdvance(){
if($timeSinceReset == $timeToChange){
$timeSinceReset = 0;
$('#slideRight').trigger("click"); // execute click if satisfied
}
else{$timeSinceReset++;}
}
To stop from looping until the animation is done, reset $timeSinceReset back to 0 (zero) when you click on the thumbnail. Something like:
$('#thumbnail').click(function(){
$timeSinceReset = 0;
});
That'll give you a nice 5 second buffer (or whatever you set $timeToChange) before the loop continues.
As for the first part of your question, grab the number of the particular thumbnail, and use that to scroll to the appropriate image. Something like:
$('.thumb').click(function (each) {
$childNumber = $(this).index();
});
which you cansee in this fiddle. Click in one of the grey boxes and it'll tell you which one you clicked in. Use that info to scroll to the appropriate image (1, 2 or 3 if you only have three images).
Hope this helps.
Here is a full solution for one possible way of doing it at this fiddle.
HTML:
The top container holds the images. In this particular example I've included three, using divs instead of images. Whether you use images or divs doesn't change anything.
<div class="holder_container">
<div class="img_container">
<div class="photo type1">ONE</div>
<div class="photo type2">TWO</div>
<div class="photo type3">THREE</div>
</div>
</div>
.img_container holds all the images, and is the same width as the sum of the widths of the images. In this case, each image (.photo) is 150px wide and 50px tall, so .img_container is 450px wide and 50px tall. .holder_container is the same dimensions as a single image. When this runs, the .holder_container is set to hide any overflow while .img_container moves its position left or right.
Included also are two nav buttons (forward and back)
<div class="nav_buttons">
<div class="nav back"><<<</div>
<div class="nav forward">>>></div>
</div>
As well as three thumbnail images - one for each image in the top container
<div class="top">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
CSS:
Refer to the JS Fiddle for all CSS rules.
The most important are:
.holder_container {
margin: 0px;
padding: 0px;
height: 50px;
width: 150px;
position: relative;
overflow: hidden;
}
.img_container {
margin: 0px;
padding: 0px;
height: 50px;
width: 450px;
position: relative;
left: 0px;
top: 0px;
}
In the example, .type1, .type2 and .type3 are only used to color the image divs so you can see the animation. They can be left out of your code.
JavaScript:
The javascript contains the following elements…
Variables:
var timeToChange = 3; // period of the image change, in seconds
var timeSinceReset = 0; // how many seconds have passed since last image change
var currentImage = 1; // Which image you are currently viewing
var totalImages = 3; // How many images there are in total
Functions:
autoAdvance - called once every second via setInterval. Counts the number of seconds since the last image change. If the number of seconds that has passed is equal to the period, a function is called that switches the images.
function autoAdvance() {
if (timeSinceReset == timeToChange) {
timeSinceReset = 0;
moveNext();
} else {
timeSinceReset++;
}
}
moveNext() - moves to the next image. If the current image is the last (currentImage == totalImages) then currentImages is set back to 1 and the first image is displayed.
function moveNext(){
if(currentImage == totalImages){
currentImage = 1;
var newPos = 0 + 'px';
$('.img_container').animate({left: newPos}, 300);
}else{
currentImage++;
var newPos = -((currentImage-1) * 150) + 'px'; // child numbers are zero-based
$('.img_container').animate({left: newPos}, 300);
}
}
Rest of code:
If one of the thumbs is clicked, move to the corresponding image.
$('.thumb').click(function (each) {
timeSinceReset = 0;
var childNumber = $(this).index();
currentImage = childNumber + 1; // child numbers are zero-based
var newPos = -(childNumber * 150) + 'px'; // child numbers are zero-based
$('.img_container').animate({left: newPos}, 300);
});
If one of the navigation buttons is clicked, move accordingly. If "back" is clicked, move one image backwards (or to last image if currently on first). If "first" is clicked, move one image forwards (or to first image if currently on last).
$('.nav').click(function(){
timeSinceReset = 0;
if($(this).hasClass('back')){ // Back button
if(currentImage == 1){
currentImage = totalImages;
}else{
currentImage--;
}
}else{ // Forward button
if(currentImage == totalImages){
currentImage = 1;
}else{
currentImage++;
}
}
var newPos = -((currentImage-1) * 150) + 'px';
$('.img_container').animate({left: newPos}, 300);
});
Here is the link to the fiddle example.
Related
I'm trying to write a function that upon each button click, it changes the shape of the triangle.
I'm a novice, and I could probably do this quicker with toggle() but I want to get better at writing functions because it's holding me back. Any help would be appreciated. You don't have to give me the answer, but a point in the right direction would be so appreciated! Thank you.
I have the first two shapes but I don't know how to bring in the last two.
https://jsfiddle.net/gs0c30vd/2/
$(document).ready(function(){
$("#tri").click(function(){
$('#triangleup').hide();
$('#triangleright').show();
}) ;
});
A very simple and small jQuery script can do it like below - the only requirement for this is that you add the same class to the elements (see HTML beneath):
$(document).ready(function(){
// declare the first element in the range w. respect to the order of the HTML
var firstElement = $(".firstTriangle");
// declare the last element in the range here to reset the "loop" of elements
var lastElement = $(".lastTriangle");
$("#tri").click(function() {
if ($(lastElement).is(":hidden")){
$(".triangle").filter(":visible").hide().next().show();
} else {
$(lastElement).hide();
$(firstElement).show();
};
});
// ------------------------------------------------------------
// The original uni-directional method is above.
// Beneath I have added "support" for a bi-directional method;
// i.e. going either up or down in the HTML
// ------------------------------------------------------------
$("#counterclockwise").click(function() {
if ($(firstElement).is(":hidden")){
$(".triangle").filter(":visible").hide().prev().show();
} else {
$(firstElement).hide();
$(lastElement).show();
};
});
});
You can check it out in this fiddle. The real benefit of this little method is that you dont have to declare every element in the range which you would like to show. If you apply it for a slider with a lot of images it gets tiresome to type in every element (at least in my opinion); and especially if you change some of the elements. To make this method even easier to maintain you could just use some fixed classes which you always hold as the first and last element; such as "firstTriangle" and "lastTriangle" and then adjust the variables accordingly. I've also added this approach to the script and the HTML for future reference and ease-of-use.
However the drawbacks should also be noted:
You must have your elements which u wish to toggle inside a container with no other siblings (such as shown in the HTML). Otherwise it will move on to other elements and showing/hiding these, thereby breaking the function.
There can only be one direction in which you switch between the elements (downwards in the HTML document).
However, with regard to the unidirectional "drawback" you could easily reverse the function and add another button to make up for this. Such an example can be seen here: Change slides/elements in both directions.
This effectively grants you a pretty much fully functional slider.
HTML:
<div class="myContainer">
<div id="triangleup" class="triangle firstTriangle"></div>
<div id="triangleright" style="display: none;" class="triangle"></div>
<div id="triangledown" style="display: none;" class="triangle"></div>
<div id="triangleleft" style="display: none;" class="triangle lastTriangle"></div>
</div>
<button id="tri">Click me to change the direction of the triangle</button>
<!-- Button for changing direction beneath -->
<button id="counterclockwise">Change direction <b>counter-clockwise</b></button>
Interpretation of the function:
If the last element in the range is hidden (we're not through the range yet) then find the visible one (.filter(":visible")) and hide it, and afterwards find its next (next()) sibling and show (show()) this.
However, if the last Element is visible (then you are at the end of the range), manually hide this and show the first element - thereby starting the range over again.
Note: Pardon my lengthy answer (although that might not be a bad thing) but this was also a learning process for me as well - I wasn't even aware that a "slideshow" effectively could be made that easy with jQuery until I found the .filter() parameter in connection with this question.
You can use a Switch statement to track the current position of the triangle from 0..3 like so:
$(document).ready(function() {
var rot = 0
$("#tri").click(function() {
switch (rot) {
case 0:
$('#triangleup').hide();
$('#triangleright').show();
rot += 1;
break;
case 1:
$('#triangleright').hide();
$('#triangledown').show();
rot += 1;
break;
case 2:
$('#triangledown').hide();
$('#triangleleft').show();
rot += 1;
break;
case 3:
$('#triangleleft').hide();
$('#triangleup').show();
rot = 0;
break;
}
});
});
If your html looks like this
<div id="container">
<div class="shape visible"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
And your css class for .shape is display:none and .visible is display:block
Than your js can be
$("#tri").click(function() {
var current = $(".visible");
var options = $("#container");
var index = options.index(current);
$(".visible").removeClass("visible");
If(index<options.length -1){
options[index + 1].addClass("visible");
}else{
options[0].addClass("visible");
}
});
Forgive me for the typeos I did this on my phone.
One way to do it is to store the names of the shapes in an array then have some sort of counter that increases each time you click the button. The modulus/remainder from that counter as compared to the array length will enable you to loop through them.
Code example:
var index = 0
var shapeArr = [
'#triangleup',
'#triangleright',
'#triangledown',
'#triangleleft'
]
var len = shapeArr.length
$(document).ready(function(){
$("#tri").click(function(){
$(shapeArr[index % len]).hide();
$(shapeArr[++index % len]).show();
}) ;
});
$(document).ready(function(){
var count = 0;
$("#tri").click(function(){
if( count == 0)
{
$('#triangleup').hide();
$('#triangleright').show();
count++;
}
else if(count == 1)
{
$('#triangleright').hide();
$('#triangledown').show();
count++;
}
else if(count == 2)
{
$('#triangledown').hide();
$('#triangleleft').show();
count++;
}
else
{
$('#triangleleft').hide();
$('#triangleup').show();
count = 0;
}
}) ;
});
this is not a good way you make upon this
You can use a flag isUp to know the current status and negate it on every click
$(document).ready(function(){
var isUp = true;
$("#tri").click(function(){
if (isUp) {
$('#triangleup').hide();
$('#triangleright').show();
} else {
$('#triangleup').show();
$('#triangleright').hide();
}
isUp = !isUp;
}) ;
});
EDIT:
I have seen you have four triangles. If you want a full rotation, then you might want to do this:
$(document).ready(function(){
var directions = ["up", "right", "down", "left"];
var directionIndex = 0;
$("#tri").click(function(){
$("#triangle" + directions[directionIndex]).hide();
$("#triangle" + directions[directionIndex = ((directionIndex + 1) % directions.length)]).show();
}) ;
});
You could have an alternative solution using just a few lines of CSS and a small addition in your jQuery code. The point is to simply rotate the triangle by using CSS transform attribute.
Example using jQuery
$(document).ready(function() {
var degrees = 0;
$("#tri").click(function() {
degrees = degrees + 90;
$('#triangle').css("transform", "rotate(" + degrees + "deg)");
});
});
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="triangle"></div>
<br>
<button id="tri">Click me to change the direction of the triangle</button>
You can also check this out in this updated Fiddle.
Example using only Javascript
var degrees = 0;
var triangle = document.getElementById("triangle");
document.getElementById("tri").addEventListener("click", function() {
degrees = degrees + 90;
var style = triangle.style;
style.transform = "rotate(" + degrees + "deg)";
});
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id="triangle"></div>
<br>
<button id="tri">Click me to change the direction of the triangle</button>
The closest solution I found is Show div on scrollDown after 800px.
I'm learning HTML, CSS, and JS, and I decided to try to make a digital flipbook: a simple animation that would play (ie, load frame after frame) on the user's scroll.
I figured I would add all the images to the HTML and then use CSS to "stack them" in the same position, then use JS or jQuery to fade one into the next at different points in the scroll (ie, increasing pixel distances from the top of the page).
Unfortunately, I can't produce the behavior I'm looking for.
HTML (just all the frames of the animation):
<img class="frame" id="frame0" src="images/hand.jpg">
<img class="frame" id="frame1" src="images/frame_0_delay-0.13s.gif">
CSS:
body {
height: 10000px;
}
.frame {
display: block;
position: fixed;
top: 0px;
z-index: 1;
transition: all 1s;
}
#hand0 {
padding: 55px 155px 55px 155px;
background-color: white;
}
.frameHide {
opacity: 0;
left: -100%;
}
.frameShow {
opacity: 1;
left: 0;
}
JS:
frame0 = document.getElementById("frame0");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 800) {
frame0.className = "frameShow"
} else {
frame0.className = "frameHide"
}
};
window.addEventListener("scroll", myScrollFunc);
};
One of your bigger problems is that setting frame0.className = "frameShow" removes your initial class frame, which will remove a bunch of properties. To fix this, at least in a simple way, we can do frame0.className = "frame frameShow", etc. Another issue is that frame0 is rendered behind frame1, which could be fixed a variety of ways. ie. Putting frame0's <img> after frame1, or setting frame0's CSS to have a z-index:2;, and then setting frame0's class to class="frame frameHide" so it doesn't show up to begin with. I also removed the margin and padding from the body using CSS, as it disturbs the location of the images. I have made your code work the way I understand you wanted it to, here is a JSFiddle.
It depends on your case, for example, in this jsFiddle 1 I'm showing the next (or previous) frame depending on the value of the vertical scroll full window.
So for my case the code is:
var jQ = $.noConflict(),
frames = jQ('.frame'),
win = jQ(window),
// this is very important to be calculated correctly in order to get it work right
// the idea here is to calculate the available amount of scrolling space until the
// scrollbar hits the bottom of the window, and then divide it by number of frames
steps = Math.floor((jQ(document).height() - win.height()) / frames.length),
// start the index by 1 since the first frame is already shown
index = 1;
win.on('scroll', function() {
// on scroll, if the scroll value equal or more than a certain number, fade the
// corresponding frame in, then increase index by one.
if (win.scrollTop() >= index * steps) {
jQ(frames[index]).animate({'opacity': 1}, 50);
index++;
} else {
// else if it's less, hide the relative frame then decrease the index by one
// thus it will work whether the user scrolls up or down
jQ(frames[index]).animate({'opacity': 0}, 50);
index--;
}
});
Update:
Considering another scenario, where we have the frames inside a scroll-able div, then we wrap the .frame images within another div .inner.
jsFiddle 2
var jQ = $.noConflict(),
cont = jQ('#frames-container'),
inner = jQ('#inner-div'),
frames = jQ('.frame'),
frameHeight = jQ('#frame1').height(),
frameWidth = jQ('#frame1').width() + 20, // we add 20px because of the horizontal scroll
index = 0;
// set the height of the outer container div to be same as 1 frame height
// and the inner div height to be the sum of all frames height, also we
// add some pixels just for safety, 20px here
cont.css({'height': frameHeight, 'width': frameWidth});
inner.css({'height': frameHeight * frames.length + 20});
cont.on('scroll', function() {
var space = index * frameHeight;
if (cont.scrollTop() >= space) {
jQ(frames[index]).animate({'opacity': 1}, 0);
index++;
} else {
jQ(frames[index]).animate({'opacity': 0}, 0);
index--;
}
});
** Please Note that in both cases all frames must have same height.
My boss asked me to mimic this site:
http://mailchimp.com/2013/#by-the-numbers
I've been able to figure out every piece except for the white numbers. The really cool (but tricky) effect is that the speed of the count accelerates/decelerates depending on the data-count attribute, even though the distance between sections is the same.
It looks like they used waypoints.js to differentiate between sections. I searched for a plug-in that would adjust speed depending on the data inputs, but I could only find ones like countTo.js which trigger then count, rather than continuously count up and down as the user scrolls.
Any help would be greatly appreciated!
This intrigued me, so I gave it a shot.
As far as I know, waypoints.js only fires when an element hits the edge of the viewport. I don't think you could use it for this kind of thing, because you need to continually update your counter. So I wrote this without any jQuery plugin.
Disclaimer: This code may or may not work for you, either way, please regard it as nothing more than a sketch of a solution, it still needs to be improved in several places to be used for a production site.
var current = $('.step').first();
$('.step').each(function() {
var start = $(this).data('count'),
end = $(this).next().data('count'),
height = $(this).height(),
offset = $(this).offset().top,
increment = end ? height / (end - start) : 0; //after how many pixels of scrolling do we need to incremwent our counter? Set to 0 for last element, just in case
// just adding the count as text, so it gets displayed
$(this).text(start);
//store increment and offset, we need those in our scrollListener
$(this).data({
increment: increment,
offset: offset
});
});
$(document).on('scroll', function() {
var scrollpos = $(window).scrollTop(),
elementscrollpos,
counter;
//check if scrolled to the next element
if (current.next().data('offset') < scrollpos) {
current = current.next();
} else if (current.data('offset') > scrollpos) {
current = current.prev();
}
//calculate the current counter value;
elementscrollpos = scrollpos - current.data('offset');
counter = Math.floor(current.data('count') + elementscrollpos / current.data('increment'));
$('.counter').text(counter);
});
body {
margin: 0;
}
.counter {
position: fixed;
top: 0;
left: 0;
}
.step {
height: 100vh;
text-align: center;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="counter"></div>
<div class="step" data-count="0"></div>
<div class="step" data-count="1"></div>
<div class="step" data-count="2"></div>
<div class="step" data-count="8"></div>
<div class="step" data-count="100"></div>
<div class="step" data-count="110240"></div>
<div class="step" data-count="110250"></div>
I'm working on a website for a family friend. On it they wanted to have logos from all their associates on one row, that subtly fade to get replaced with additional logos that didn't fit the first time.
To achieve this i've assigned the <img>'s classes, that represent what cycle they should appear in, depending on how many of those images will fit on the row given its current width. This happens in my assignCycleNumbers function.
Then to actually fade them in and out i have another function called cycleAssociates which recursively fades the appropriate classes in and out. Well in theory, however it doesn't seem to be working properly, which is particularly odd because i tested the function here and it works fine. The only difference between them is that now i'm trying to assign the cycle numbers dynamically.
I'm really stumped and could do with some help!
You can see the website hosted here and if you scroll down to the bottom of the content you'll see the logos at the bottom, not behaving as expected. (First cycle appears okay but then subsequent cycles get muddled, more observable if you resize to a smaller screen width).
You can inspect the code thoroughly through your browser but here's everything you need to know, again i'd really appreciate any insight.
EDIT: The whole javascript file as requested. But all the relevant stuff is below:
JS:
//single global variable to represent how many logo cycles there is
var totalCycles = 0;
...
$(window).load(function() {
...
totalCycles = assignCycleNumbers();
cycleAssociates();
});
// window is resized
$(function(){
$(window).resize(function() {
...
totalCycles = assignCycleNumbers();
});
});
...
function cycleAssociates(){
var cycle = 0;
var recursiveCycling = function(cycle, totalCycles){
var currentAssociate = ".cycle" + cycle;
//fade in all img with the current cyle class over a second,
//wait 3 seconds before fading out over a second.
$(currentAssociate).delay(100).fadeIn(1000).delay(3000).fadeOut(1000,
function(){
cycle++;
if(cycle > totalCycles){
cycle = 0;
}
recursiveCycling(cycle, totalCycles);
});
};
recursiveCycling(cycle, totalCycles);
}
function assignCycleNumbers(){
//first remove any old cycle# classes (resized window case)
$('[class*="cycle"]').removeClass( function(unusedIdx,c){
return c.match(/cycle\d+/g).join(" ");
});
//measure div width
var divSpace = $("#bodies").innerWidth();
//assign a cycle number to a number of logos until no more will fit in that div
var cycleNum = 0;
$(".associate").each(function(){
if( divSpace - $(this).width() > 0){
$(this).addClass("cycle" + cycleNum);
divSpace = divSpace - $(this).width();
}
else{ //next logo won't fit current cycle, create next cycle
cycleNum++
$(this).addClass("cycle" + cycleNum);
divSpace = $("#bodies").innerWidth() - $(this).width();
}
});
return cycleNum;
}
html:
<img class="associate" src="IMG/spare.png" alt=""/>
<img class="associate" src="IMG/bcs_professional.jpg" alt="BCS Professional Member"/>
<img class="associate" src="IMG/climate_savers.jpg" alt="Climate Savers Smart Computing"/>
<img class="associate" src="IMG/code_of_conduct.jpg" alt="Data Centres Code Of Conduct Endorser"/>
<img class="associate" src="IMG/spare.gif" alt=""/>
<img class="associate" src="IMG/enistic.gif" alt="Enistic"/>
<img class="associate" src="IMG/greentrac_authorised.png" alt="Greentrac Authorised Reseller"/>
<img class="associate" src="IMG/very_pc.jpg" alt="Very PC Approved"/>
<img class="associate" src="IMG/spare.jpg" alt=""/>
css:
#bodies img.associate{
float: left;
max-width: 120px;
max-height: 80px;
display:none;
}
The issue is that your fadeOut function's callback is being executed even before all elements in the current cycle are faded out. Here's a modified version of your function that works as expected:
function cycleAssociates(){
var cycle = 0;
var recursiveCycling = function(cycle, totalCycles){
var currentAssociate = ".cycle" + cycle;
var n = $(currentAssociate).length; //How many images in current cycle?
$(currentAssociate).each(function() {
$(this).delay(100).fadeIn(1000).delay(3000).fadeOut(1000, function() {
n --;
if(n <= 0) { //current cycle done?
cycle++;
if(cycle > totalCycles){
cycle = 0;
}
recursiveCycling(cycle, totalCycles);
}
});
});
};
recursiveCycling(cycle, totalCycles);
}
To fix the issues that come up on window resize, try replacing your current $(window).resize handler with this:
$(function(){
$(window).resize(function() {
parallelNavbar();
$(".associate").stop(); //if there are any animations, stop 'em
$(".associate").hide(); //hide all associates
totalCycles = assignCycleNumbers(); //update the assignment
cycleAssociates(); //let's get cyclin' again!
});
});
Although I think you have some issues with scrolling. This should resolve the main cycling problem, though -- so I hope that helped!
I have some simple code to replace an image src. It is working correctly but everytime the image is updated, the browser skips right back to the top of the page.
I have several image tags in my page. All of which hidden, except for the first one. The script just iterates through them and uses the src attribute to update the first image.
Here is the code I am using:
var j = jQuery.noConflict();
var count = 1;
var img;
function update_main_image()
{
count++;
if (j('#main_image_picture_'+count).length > 0)
{
img = j('#main_image_picture_'+count).attr('src');
}
else
{
count = 1;
img = j('#main_image_picture_'+count).attr('src');
}
j(".main_image_picture_auto").fadeOut(1500, function() {
j(this).fadeIn();
j(this).attr("src", img);
});
}
j(document).ready(function()
{
setInterval(update_main_image, 6000);
});
Any ideas what might be causing it?
Any advice appreciated.
Thanks.
Try to add DIV around your IMG.main_image_picture_auto with width and height style properties setted to maximum posible image size, for example:
<div style='width:400px; height:400px; border: 0px; background: transparent; '>
<img class='main_image_picture_auto' src=''/>
</div>
<!-- Where width:400px and height:400px is maximum allowed image size -->
And I think, that is better to use setTimeout instead of setInterval
function update_main_image() {
// ....
setTimeout(update_main_image, 6000);
}
j(document).ready(function() {
setTimeout(update_main_image, 6000);
});
http://jsfiddle.net/UBEWS/