|
JavaScript - Different Image Load In Each Paginate Divs/css/javascript
Ok, basically I am using the script bellow to produce a javascript slideshow similar to this: http://www.valvesoftware.com/ but instead of the red boxes I want an image representing each slide.
My problem is, I can't figure out how to call in a different image for each of these tabs (Paginates). Any help would be much appreciated, thanks. HEAD: Code: <style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;width:880px;height:400px;
}
#paginate {
position:absolute;z-Index:4;left:760px;top:15px;height:20px;
}
#paginate .default {
position:relative;width:100px;height:50px;margin-bottom:27px;border:solid black 1px;background:url(images/imagehold.png);
}
#paginate .active {
background:url(images/imagehold_o.png);
}
/*]]>*/
</style><script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// The functional code size is 1.39K
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//
// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// whe
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the initial value. (digits, default = 0)
// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// whe
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//
// **** Functional Code - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
d=Math.max(d,s<0||f<0?d:0);
this.data[0]=d;
this.apply();
if (ms<this.mS){
this.to=setTimeout(function(){oop.cng(); },10);
}
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
BODY: Code: <script type="text/javascript">
/*<![CDATA[*/
function zxcFadeSlideShow(o){
var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),z0=0,ary=[],ms=o.FadeDuration,hold=o.Hold,srt=o.AutoStart,pag=document.getElementById(o.PaginateID),pary=[],z1=0;
for (;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.zIndex=z0>0?'0':'2';
imgs[z0].style.left='0px';
imgs[z0].style.top='0px';
zxcOpacity(imgs[z0],z0>0?0:100);
ary[z0]=new zxcAnimate('opacity',imgs[z0],z0>0?0:100);
}
if (pag){
this.cls=['default','default active'];
for (;z1<ary.length;z1++){
pary[z1]=document.createElement('DIV');
pary[z1].className=this.cls[z1>0?0:1];
pag.appendChild(pary[z1]);
this.addevt(pary[z1],'mouseup','page',z1);
}
}
this.ary=ary;
this.pary=pary;
this.lstp=pary[0];
this.ms=typeof(ms)=='number'?ms:1000;
this.hold=(typeof(hold)=='number'?hold:1000)+this.ms;
this.srt=typeof(srt)=='number'?srt+this.ms:false;
this.to=null;
this.cnt=0;
this.lst=ary[this.cnt];
this.Auto(this.hold);
}
zxcFadeSlideShow.prototype={
Next:function(cnt,goto){
this.Pause();
if (this.lstp){
this.lstp.className=this.cls[0];
}
this.lst.obj.style.zIndex='0';
this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
this.lst=this.ary[cnt];
this.lst.obj.style.zIndex='2';
this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
if (this.pary[cnt]){
this.lstp=this.pary[cnt];
this.lstp.className=this.cls[1];
}
this.cnt=cnt;
if (goto&&this.srt){
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },this.srt);
}
},
page:function(nu){
this.Next(nu,true);
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
},
Auto:function(ms){
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },ms||500);
},
Pause:function(){
clearTimeout(this.to);
},
auto:function(){
this.Pause();
var oop=this,cnt=this.cnt;
cnt=++cnt%this.ary.length;
this.to=setTimeout(function(){ oop.Next(cnt); oop.auto(); },this.hold);
}
}
S=new zxcFadeSlideShow({
ID:'tst', //(optional) unique ID name of the paent DIV. (string )
PaginateID:'paginate', //(optional) unique ID name of the paginate DIV. (string, default = no pagination)
FadeDuration:1000, //(optional) the fade duration in milli seconds. (number, default = 1000)
Hold:6000, //(optional) the 'hold' between auto rotation in milli seconds. (number, default = 1000)
AutoStart:2000 //(optional) auto start after goto. (number, default = no auto start)
});
x=new zxcAnimate('opacity',document.getElementById('tst'))
//x.animate(0,100,1000)
/*]]>*/
</script>
Similar TutorialsI'm trying to build a gallery. So far I've used jquery for the scrolling thumbnails. The problem I am having is deciding which would be the best way to load the larger version of the thumbnails into a div? Currently I am using a jquery attribute replace, but the only problem I'm having is I want to use lightbox for the large images. Some of the images have text so they need to be big if the user would like to read them. Right now lightbox is working except that it doesn't understand what image it's on when you click on the large version. I believe this is because of the attribute replace. Here is where you can view the problem: http://www.tsutsumidaphoto.com/Mihoko/akiko3.php If you click on any thumbnail after the first then click on the large version it will bring up the first image then go from there. Any suggestions, I've tried for too long on my own! Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript">
// JavaScript Document
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/newtopbar.jpg"
images[2] = "images/newtopbar2.jpg"
images[3] = "images/newtopbar3.jpg"
images[4] = "images/newtopbar4.jpg"
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
Anyone know of a better CLI base than the one I'm using? It's based off of http://sacrifizezone.blogspot.com/ ------------------------------ So, the way the CLI works is whenever it sees the input which has the matching ID of a DIV, it displays it. Example @ http://ijappy.webs.com/green You can download an early version of the soarce w/ the command "dl src"... It works great, for now, but as I add more & more commands I'm sure the INDEX file will surely begin to... be populated.. So I was wondering if anyone knew a way (using Javascript/Ajax/PHP I really don't care) to "PRINT" a files contents instead of showing a div. So when I typed in 'help' it looked up help.html and printed it's content... Is there such thing? Is this a bad concept? Please, help haha ;D Hello Guys, Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java. What i need to be able to do is.. When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs. #contentwindow #three I already have jquery running on the page and all css is embeded for now if that is helpful. http://www.bushcottages.co.uk/new.htm Thanks your help is supremely appreciated Peter Hi guys, I am trying to insert the following call into my page; Code: <script type="text/javascript" defer="true">
$('#query').autocomplete({
serviceUrl:'service/autocomplete.ashx',
minChars:1,
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:250,
deferRequestBy: 0, //miliseconds
params: { country:'Yes' }, //aditional parameters
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
</script>
It works fine in all browsers except ie(6,7,8) Code: Internet Explorer can not open website. Operation Aborted. I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded. I tried adding Defer="true" to the script however this doesn't seem to work. Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded? Thanks guys George I already have something that paginates thru records by clicking a next or back link that works great. Now I would like to upgrade this to a paginate script that does not do page loads everytime the user clicks next or back. I know how to refresh the new record into input fields with ajax so I don't need help there but how do I change the text of the record count that displays to the user on the screen with javascript as the page will not refresh so I can't write "Record 5 of 200" or whatever record the user is on. I guess I'm asking how can I write to the screen without page refreshes. I will be using an onclick event to click thru the records. How can I add a different number as a parameter to the onclick event everytime I click it without page refreshes? I was going to use the record id number as a parameter to the function so I know what record to get. Sorry for the long rambling post. Tracy I am using the below code to create a blogging site but the pagination in one tab apprears in the other tab. How do I individually create a pagination for each tab? <?php // Begin session, initiate database connection, etc. require_once('./includes/base.php'); // If logging out, delete session variables if($_GET['logout'] == 1){ @$_SESSION = array(); @session_unregister($_SESSION['userID']); @session_unregister($_SESSION['userName']); @session_unregister($_SESSION['userUser']); @session_unregister($_SESSION['userPass']); @session_destroy(); } // Display header require("./templates/$template/header.php"); ?> <div id="blurb" align="right"> <script language="javascript"> function isClear() { document.myForm[0].value=''; return true; } </script> <!-- new search --> <?php ob_start(); if(!empty($_SESSION['userID']) and !empty($_POST['user'])){ echo '<form action="search.php" method="post" name="myForm"> <input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/> <input type="submit" name="serachuser" value="search"/></form>'; } ?> </div> <br> <div id="blurb" align="justify"> <em>Hello world</em> <?php echo "$sitename"; ?> is blah blah blah.... </div> <br> <div id="container-5"> <ul> <li><a href="#fragment-13"><span>Blogs</span></a></li> <li><a href="#fragment-14"><span>Links</span></a></li> <li><a href="#fragment-15"><span>Images</span></a></li> </ul> <div id="fragment-13"> <?php $sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC "); while($row = mysql_fetch_array($sql)){ $abcd= $row['userName']; $abcd = str_replace (" ", "-", $abcd); $time = reltime($row['postTime']); echo ' <div class="virtualpage"> <table width="100%" > <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by: '.$row['userUser'].', <a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a> '.$row['postComments'].' , Time elapsed: '.$time.'</a></td> </table><br> </div>';} ?> <? echo '<div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div>' ; ?> </div> <div id="fragment-14"> <?php $sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC"); while($row = mysql_fetch_array($sql)){ $abcd= $row['userName']; $abcd = str_replace (" ", "-", $abcd); $time1 = reltime($row['linksTime']); echo ' <div class="virtualpage"> <table width="100%" > <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by: '.$row['userUser'].', <a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a> '.$row['linksComments'].' , Time elapsed: '.$time1.'</a></td> </table><br> </div>';} ?> <? echo '<div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div>' ; ?> </div> <div id="fragment-15"> <?php // test grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20'); ?> </div> </div> <?php // Display footer require("./templates/$template/footer.php"); ?> <table align="center"><tr><td align="center"> <script type="text/javascript" defer="defer"> var gallery=new virtualpaginate("virtualpage",10) gallery.buildpagination("gallerypaginate") </script> </td></tr></table> Thank you ....... Hi to all I have a javascript code that when a page loads, some contents must be load within a given div tag. But the problem is that this javascript code sometimes work an somtimes Not work. What's the problem? Thank You... Hi Guys, A client has given me some code but i need to add some code to it so it loads a URL along with the rest of the code. Below is the javascript code i need to work with, i know its to do with Google Tracking (Dart) but i dont understand it as I've never done JavaScript befo Code: <script type="text/javascript">
function dart_tracking(callback) {
// Google Conversion Tracking
var img = new Image();
img.src="
https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0
";
var img2 = new Image();
img2.src="
https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0
";
_gaq.push(['_trackEvent', 'subscribeButton', 'clicked']);
if (typeof callback != "undefined") {
setTimeout(callback, 1500);
}
}
</script>
Now the above code loads up when a subscribe button is clicked on my clients webpage, now how do i go about adding code to this so lets say http://www.Google.co.uk is loaded too? Any help would be great. Thank you! Hello, I have a page that uses the Yahoo Buzz JS widget which renders a button and count of clicks from Yahoo servers. The display of the widget is at the top of the page - which causes the rest of the page to appear to load slowly (cause it's waiting on the Yahoo JS to finish). Ordinarily, I would place all JS calls at the bottom of the page as not to affect the performance of the rest of the page. But since this JS actually renders an UI element, I don't know how to move the code to the bottom of the page (if I move the JS, the UI widgit appears at the bottom). Any suggestions on how to do this? Code: <div class="swidgets"> <script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"> http://www.example.com/page.htm </script> </div> Hi I'm an AS3 dev learning Javascript. I'm currently writing a simple script that loads an image as seen below. I deliberately misspell the file name to test the fail. Code: var fileName = "anImageThatDoesntExist.jpg";
var image = new Image();
image.onload = imageLoaded;
try {
image.src = "images/" + fileName;
} catch( error ) {
console.log('load error', error.message );
} finally {
console.log('unable to catch error!')
}
function imageLoaded( event ) {
console.log('image loaded');
}
When I run this script I was expecting the 'catch' to pick up the error and tell me that the file doesn't exist. The 'catch' statement is ignored and 'finally' is executed. I would be very grateful if someone could let me know if I'm writing the try/catch incorrectly or whether it doesn't work in this way when loading an image. Many thanks in advance.... Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! Hello everyone, I'm looking for a javascript script that will load a small image where the mouse is, then it would go away after a couple seconds. Thanks a bunch! Hi I have created the following page http://kylehouston.com/new/choir_contact.html I have added JQuery to smoothly fade in the screenshot on this page but on the first load the image gradually loads which misses out on the fade in effect. Is there a way I can load the image invisibly and then fade it in? Thanks in advance for your advice Kyle hello, iam kind of new at javascript, but iam trying my best to be better and better. so i have 3 divs (my_block, my_image, my_description) as you see in my code below Code: <div class = "my_block">
<div class = "my_image">
<img src="images/pic.jpg" width="600" height="600">
</div>
<div class = "my_description">
<a> Description goes here.... ! </a>
</div>
</div>
just i want to display the "my description" div only after the 100% image loading completion which exist in "my_image" div. so how can i get this done with Javascript please ?? thanks a lot How can I make it to where an image will load in the corner of a website? Specifically, I have part of a template I want all people to see, however, some people either get it cut off or not shown at all because of their resolution. Hello, Can anyone figure out whats going on with this page and i need to finish the site by this evening? It is a wordpress site. the background image is shifting to the right on IE7 after the page loads on only the homepage. I think its the slider but im not sure www.grapevineoutreach.org thanks Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html Where the images on the page fade in as the user scrolls down. I implemented the code on a page, he http://www.jamiewebster.co.uk/orca.html Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome. Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!) Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll. Any ideas, or if there is better code out there? Thanks in advance!! It must be a simple thing... I am trying to change an image source on page load depending on the contents of a cookie: Code: function goVisited(cookiename,img_name,img_src) {
var visited = readCookie(cookiename);
if (visited == "1"){
//alert("visited!");
document[img_name].src=img_src;
}}
<img onload="goVisited('main1','Introduction','img/Yellow.gif');" name="Introduction" border="0" src="img/Green.gif" width="250" height="18">
I need the page to check the cookie "main1" and if its value is 1, then change the image src from Green.gif to Yellow.gif. It almost works, but I get a stack overflow. |
|||||||