jnf555 Posted June 5, 2011 Share Posted June 5, 2011 hi this works fine and does what i want it to, but is there an easier way of reaching the same results.test page<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("#start").click(function(){ $("#1").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#1").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#1").animate({left:"0px",top:"50px",height:"100px",width:"140px"},500, function(){ $("#2").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#2").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#2").animate({left:"0px",top:"155px",height:"100px",width:"140px"},500, function(){ $("#3").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#3").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#3").animate({left:"0px",top:"260px",height:"100px",width:"140px"},500, function(){ $("#4").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#4").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#4").animate({left:"0px",top:"365px",height:"100px",width:"140px"},500, function(){ $("#5").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#5").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#5").animate({left:"0px",top:"470px",height:"100px",width:"140px"},500, function(){ $("#6").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#6").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#6").animate({left:"145px",top:"470px",height:"100px",width:"140px"},500, function(){ $("#7").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#7").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#7").animate({left:"290px",top:"470px",height:"100px",width:"140px"},500, function(){ $("#8").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#8").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#8").animate({left:"435px",top:"470px",height:"100px",width:"140px"},500, function(){ $("#9").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#9").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#9").animate({left:"580px",top:"470px",height:"100px",width:"140px"},500, function(){ $("#10").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#10").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#10").animate({left:"580px",top:"365px",height:"100px",width:"140px"},500, function(){ $("#11").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#11").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#11").animate({left:"580px",top:"260px",height:"100px",width:"140px"},500, function(){ $("#12").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#12").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#12").animate({left:"580px",top:"155px",height:"100px",width:"140px"},500, function(){ $("#13").animate({left:"150px",top:"155px",height:"100px",width:"140px"},500); $("#13").animate({left:"150px",top:"155px",height:"310px",width:"420px"},5000); $("#13").animate({left:"580px",top:"50px",height:"100px",width:"140px"},500);}); });}); }); }); }); }); });}); }); }); }); }); $("#stop").click(function(){ $("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10,#11,#12,#13").stop(); });});</script><style type="text/css">body{background-color:black;}#container{width:720px;height:900px;margin: 0 auto;position:relative;}.thumbnail{position:absolute;border:1px solid white;width:140px;height:100px;}.mainpic{position:absolute;border:1px solid white;width:420px;height:100px;left:150px;top:50px;font-family:"comic sans ms";text-align:center;font-size:20px;color:red;background-color:silver;}</style></head><body><center><div id="container"><div class="mainpic" >take a look around our gallery<br>the pictures were taken when a trip from our village went to Tyndrum (scotland)</div><div ><img id="1" class="thumbnail"style="left:0px;top:50"src="images/tyndrum001.jpg" alt"" ></div><div ><img id="2" class="thumbnail"style="left:0px;top:155"src="images/tyndrum002.jpg" alt"" ></div><div ><img id="3" class="thumbnail"style="left:0px;top:260"src="images/tyndrum003.jpg" alt"" ></div><div ><img id="4" class="thumbnail"style="left:0px;top:365"src="images/tyndrum004.jpg" alt"" ></div><div ><img id="5" class="thumbnail"style="left:0px;top:470"src="images/tyndrum005.jpg" alt"" ></div><div ><img id="6" class="thumbnail"style="left:145px;top:470"src="images/tyndrum006.jpg" alt"" ></div><div ><img id="7" class="thumbnail"style="left:290px;top:470"src="images/tyndrum007.jpg" alt"" ></div><div ><img id="8" class="thumbnail"style="left:435px;top:470"src="images/tyndrum008.jpg" alt"" ></div><div ><img id="9" class="thumbnail"style="left:580px;top:470"src="images/tyndrum009.jpg" alt"" ></div><div ><img id="10" class="thumbnail"style="left:580px;top:365"src="images/tyndrum010.jpg" alt"" ></div><div ><img id="11" class="thumbnail"style="left:580px;top:260"src="images/tyndrum011.jpg" alt"" ></div><div ><img id="12" class="thumbnail"style="left:580px;top:155"src="images/tyndrum012.jpg" alt"" ></div><div ><img id="13" class="thumbnail"style="left:580px;top:50"src="images/tyndrum013.jpg" alt"" ></div><button id="start" >start</button><button id="stop">next photo</button><a href="imggallery.html"><button>refresh</button></a></div></body></html>thanks jnf555 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 5, 2011 Share Posted June 5, 2011 surely using a class name instead, then when the animation begins retrieve the current left:top: values, go through animation and return to these retrieved values, and then move on to the next sibling with same class name. Link to comment Share on other sites More sharing options...
jnf555 Posted June 5, 2011 Author Share Posted June 5, 2011 thanks for replyi am not sure what you mean, can you please tell me morethanks jnf555 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 5, 2011 Share Posted June 5, 2011 What you do is create a function that will use a incrementing count value to refrence id="1" id="2" , by the way is not a good idea to use a number as id ref it should be a alpha character then a number. Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.Do NOT start a class name with a number! This is only supported in Internet Explorer. http://www.w3schools.com/css/css_id_class.aspAlthough it does work in my Firefox browser it may depend on which version you use.animate_images = function(){count++;...}this function will also retrieve the current img elements top and left positionvar current_left = parseInt($("#"+count).css("left"));var current_top = parseInt($("#"+count).css("top")); this is used to identify where to return the img back to its original positionin the function() at the end of animation code you will check if count is less than total img elements with class name thumbnail, if yes run function again causing the count to increment each time, to animate the next img element. $("#"+count).animate({left: current_left+"px",top: current_top+"px",width:"140px",height:"100px"},500, function() { // Animation complete.if(count<$(".thumbnail").length) { animate_images(); } } you should end up with something like this <script type="text/javascript">var count =0;$(document).ready(function(){$("button").click(function(){count=0;animate_images();});});animate_images = function(){count++;var current_left = parseInt($("#"+count).css("left"));var current_top = parseInt($("#"+count).css("top"));$("#"+count).animate({left:"150px",top:"155px"},500);$("#"+count).animate({height:"310px",width:"420px"},5000);$("#"+count).animate({left: current_left+"px",top: current_top+"px",width:"140px",height:"100px"},500, function() { // animation for current img complete - check for anymoreif(count<$(".thumbnail").length) { animate_images(); } });}</script> Link to comment Share on other sites More sharing options...
jnf555 Posted June 6, 2011 Author Share Posted June 6, 2011 thanks alot for your reply, can you give me a link to a chapter where this type of codeing can be learnt .jnf555 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 6, 2011 Share Posted June 6, 2011 Not one simple link, javascript/jquery tutorials at w3schools, the jquery main website itself. Once you gain experience in working with both you can put together your own solution to a problem.For example I quickly put this together a revised code to prevent multiple individual images animating at the same time (actually a cool effect) when start clicked multiple times, and code for your stop button. <script type="text/javascript">var current_left;var current_top;var count =0;$(document).ready(function(){$("#start").click(function(){if(count==0 || count ==($(".thumbnail").length)){count=0;animate_images();}});$("#stop").click(function(){count=($(".thumbnail").length);$('.thumbnail').stop(); });});animate_images = function(){count++;current_left = parseInt($("#"+count).css("left"));current_top = parseInt($("#"+count).css("top"));$("#"+count).animate({left:"150px",top:"155px"},500);$("#"+count).animate({height:"310px",width:"420px"},5000);$("#"+count).animate({left: current_left+"px",top: current_top+"px",width:"140px",height:"100px"},500, function() { // animation for current img complete - check for anymore if(count<$(".thumbnail").length) { animate_images(); } });}</script> <button id="start">start slideshow</button><button id="stop">stop slideshow</button> Link to comment Share on other sites More sharing options...
jnf555 Posted June 6, 2011 Author Share Posted June 6, 2011 thanks alotjnf555 Link to comment Share on other sites More sharing options...
jnf555 Posted June 7, 2011 Author Share Posted June 7, 2011 hi in the post it recoments not to start id with a number, what would be a good id to use so the animation follows on.thanksjnf555 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 7, 2011 Share Posted June 7, 2011 Just change to id="image1" will do, for example<div ><img id="image1" class="thumbnail"style="left:0px;top:50"src="images/tyndrum001.jpg" alt"" ></div><div ><img id="image2" class="thumbnail"style="left:0px;top:155"src="images/tyndrum002.jpg" alt"" ></div><div ><img id="image3" class="thumbnail"style="left:0px;top:260"src="images/tyndrum003.jpg" alt"" ></div>and so on...then change jquery id ref to match, ie any $("#"+count) will now read "$("#image"+count) <script type="text/javascript">var current_left;var current_top;var count =0;$(document).ready(function(){$("#start").click(function(){if(count==0 || count ==($(".thumbnail").length)){count=0;animate_images();}});$("#stop").click(function(){count=($(".thumbnail").length);$('.thumbnail').stop(); });});animate_images = function(){count++;current_left = parseInt($("#image"+count).css("left"));current_top = parseInt($("#image"+count).css("top"));$("#image"+count).animate({left:"150px",top:"155px"},500);$("#image"+count).animate({height:"310px",width:"420px"},5000);$("#image"+count).animate({left: current_left+"px",top: current_top+"px",width:"140px",height:"100px"},500, function() { // animation for current img complete - check for anymore if(count<$(".thumbnail").length) { animate_images(); } });}</script> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 7, 2011 Share Posted June 7, 2011 Just a few other pointers1) separate all attributes with space<div ><img id="image1" class="thumbnail"style="left:0px;top:50"src="images/tyndrum001.jpg" alt"" ></div>should be<div ><img id="image1" class="thumbnail" style="left:0px;top:50" src="images/tyndrum001.jpg" alt"" ></div>2) make sure you define a specific unit<div ><img id="image1" class="thumbnail" style="left:0px;top:50" src="images/tyndrum001.jpg" alt"" ></div>should be<div ><img id="image1" class="thumbnail" style="left:0px;top:50px" src="images/tyndrum001.jpg" alt"" ></div>3) the alt attribute should have a equals symbol followed by value<div ><img id="image1" class="thumbnail" style="left:0px;top:50px" src="images/tyndrum001.jpg" alt"" ></div>should be altogether<div ><img id="image1" class="thumbnail" style="left:0px;top:50px" src="images/tyndrum001.jpg" alt="" ></div> Link to comment Share on other sites More sharing options...
jnf555 Posted June 7, 2011 Author Share Posted June 7, 2011 thanks alot thats a great helpjng555 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.