JavaScript - Picture Gallery Not Working
sorted.
Similar TutorialsFor some reason the gallery image isnt poping up in a window, it just opens it in a separate page. Anyway able to assist? www.habugfx.com/HabuMAC/portfolio.html How can you have a smaller version of a picture and when you click on it a bigger version pops up? Is this easily possible with JS? I have been working on a picture slideshow w/ a caption, and (due to being an extreme amateur) I cannot get it to work just right. I have the slideshow going, but I can't get the caption to stay on the right side of the photo, while keeping the layout fluid. I would also love to add a pause, forward, and back button, and I have tried several free slideshow generators but either they don't work or they don't produce what I'm after. Here is my code so far. Javascript: Code: <script type="text/javascript"> // Modified for: http://codingforums.com/showthread.php?p=949514#post949514 // and: http://www.codingforums.com/showthread.php?t=195033 var ImgPtr = -1; // -1 for first pass only var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/'; ImgArray = [ // format: ['imageName','Comments about image'] ['pinto-1.jpg', '<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'], ['shedding.jpg', '<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster. <i>Written by Cassidy Deardorff.</i>'], ['dewormer-1.jpg', '<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly. <i>Written by Cassidy Deardorff.</i>'] // Note: No comma after last entry ]; var intervalAction; function ShowSlide(slide_num) { document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0]; document.getElementById('mypic').alt = ImgArray[slide_num][1]; document.getElementById('Caption').innerHTML = ImgArray[slide_num][1]; } function slideshow() { ImgPtr++; ImgPtr = ImgPtr % ImgArray.length; // document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr; ShowSlide(ImgPtr); } onload = function() { slideshow(); intervalAction = setInterval("slideshow()",5000); } </script> HTML: Code: <div style="height:300px;width:398px;"> <div id="divCaption"> <div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div> <img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398"> </div><br /> </div> I would LOVE for the finished slideshow to look somewhat like the one on this website: http://www.equisearch.com/ but I know this is a lot to ask Thanks so much in advance!!! im noob and suck at javascript but i do make webdesign html+css and i realy liked script from this page: http://acidtests.googletoad.com/ when user hovers over image it zooms, when it moves away it zooms out the code is this: Code: <SCRIPT language="javascript" type="text/javascript"> <!-- function setZoom(img, dir, width, height, margin, zIndex, delay, position) { window.setTimeout(function(){ if (img.dir==dir){ img.style.width = width; img.style.height = height; img.style.margin = margin; img.style.zIndex = zIndex; } }, delay); } function imgLarger(img) { img.dir = "rtl"; img.style.position = "absolute"; var width = 200; var height = 150; var now = parseInt(img.style.zIndex); if (img.style.left=="" && bChrome==false){ img.style.left = img.offsetLeft - 50; img.style.top = img.offsetTop; } if (isNaN(now)) { now=0; } for (i=now+1; i<=10; i++) { var w = (width * (10+i))/20 + "px"; var h = (height* (10+i))/20 + "px"; var m = (-i) + "px 0 0 " + (-width*i/40) + "px"; setZoom(img, "rtl", w, h, m, i, 20*(i-now)); } } function imgSmaller(img) { img.dir = "ltr"; img.style.position = "absolute"; var width = 200; var height = 150; var now = parseInt(img.style.zIndex); if (isNaN(now)) { now=0; } for (i=now-1; i>=0; i--) { var w = (width * (10+i))/20 + "px"; var h = (height* (10+i))/20 + "px"; var m = (-i) + "px 0 0 " + (-width*i/40) + "px"; setZoom(img, "ltr", w, h, m, i, 20*(now-i)); } } function openImage(imagePath){ //Shadow var oFade = getObject("DIV", "lightbox_fade"); oFade.style.display = "block"; oFade.style.height = document.body.scrollHeight; //Embed it var oContent = getObject("DIV", "lightbox_content"); oContent.style.width = 512; oContent.style.height = 384; oContent.style.top = (screen.height-384)/2 + (document.body.scrollTop - 100); oContent.style.left = (screen.width -512)/2; oContent.style.display = "block"; oContent.innerHTML = "<CENTER><IMG src=" + imagePath + "></CENTER>"; } function closeImage(){ //Shadow var oFade = getObject("DIV", "lightbox_fade"); oFade.style.display = "none"; //Embed it var oContent = getObject("DIV", "lightbox_content"); oContent.style.display = "none"; } // --> </SCRIPT> Code: <DIV id="lightbox_fade" class="overlay" onClick="JavaScript:closeImage();"></DIV> <DIV id="lightbox_content" class="content" onClick="JavaScript:closeImage();"></DIV> <a href="JavaScript:openImage('picture/large.png');"> <IMG src="picture/small.png" alt="" width="212" height="157" border="0" onmouseover="JavaScript:imgLarger(this)" onmouseout="JavaScript:imgSmaller(this);"></a> now i dont know if people here help with taken scripts but if you do, i would apreciate alot if someone could explain how to change location of appeared image (if possible not to be fixed to 1 location but to work from place where image is inserted on html page) because obviously it was set to be always on far right cheers I'm trying to disable my record navigation pictures when they get to the end of a calendar (events are posted on days, and navigation goes to the next or previous one). Code: <a onclick="javascript:previousEvent();"> <input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a> <a onclick="javascript:nextEvent();"> <input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a> This is where I have to disable the pictures. Above in my JS I would like to have a handler that could disable them when they are at the end of the index, or at the beginning. Thanks! edit: I do have the logic already, just not sure how to disable the images. Code: function nextEvent(i) { if (index == maxIndex || index >= maxIndex) { //disable next button tempObj = document.getElementsByName("next"); tempObj.visible = false; } else { index = index + 1; eventSelected(rawDates[index]); } Hey guys/gals, do ya know an efficient way to get the coordinates of a pictures so that I can use them to create a map? It is a rectangle. Here is the code I set up for a page: Code: <HTML> <HEAD> <TITLE>Cyrus</TITLE> </HEAD> <BODY BGCOLOR=black> <div align="center"> <table border="0"; cellspacing="0"; cellpadding="0"> <tr> <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername.png"; width=900px; hieght=160px;></td> </tr> <tr> <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/navbar.png" width=900px; border="none" usemap="#navbar"></td> </tr> <tr> <td> <br> <br> <table border="0"; width=900px> <tr> <td> <div align="left"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"; width=466px; hieght=320px></div> </td> <td> <div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/equipment.png"> <br><br> <img src="http://i732.photobucket.com/albums/ww329/Chrishick/personality.png"> </div> </td> </tr> </table> </td> </tr> <tr> <td></td> </tr> <tr> <td> <div align="center"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/brought.png"></div></td> </tr> </table> </div> <map name="navbar"> <area shape="rect" coords="247,185,445,220" href="http://www.roleplayandwritinghaven.com/forum.htm" alt="Forum" /> </map> </BODY> </HTML> I am very much a newbie at Javascript, so your help is greatly appreciated. I am working on trying to create a Picture Bingo JavaScript. I am using the standard Bingo Card Generator and it works great however, I need help coding the script so that the number are associated with a picture for example everytime number 12 would show up on the card an image would replace the number. Here is the code that I am using: HTML: Code: <head> <link rel="stylesheet" rev="stylesheet" href="file:///Macintosh HD/Users/jhumberger/Documents/script01.css" /> <script src="/script01.js" type="text/javascript" language="javascript"></script> </head> <body> <h1>Bingo Card</h1> <table> <tr> <th width="20%">A</th> <th width="20%">M</th> <th width="20%">9</th> <th width="20%">6</th> <th width="20%">0</th> </tr> <tr> <td id="square0"> <td id="square1"> </td> <td id="square2"> </td> <td id="square3"> </td> <td id="square4"> </td> </tr> <tr> <td id="square5"> </td> <td id="square6"> </td> <td id="square7"> </td> <td id="square8"> </td> <td id="square9"> </td> </tr> <tr> <td id="square10"> </td> <td id="square11"> </td> <td id="WSBT">WSBT</td> <td id="square12"> </td> <td id="square13"> </td> </tr> <tr> <td id="square14"> </td> <td id="square15"> </td> <td id="square16"> </td> <td id="square17"> </td> <td id="square18"> </td> </tr> <tr> <td id="square19"> </td> <td id="square20"> </td> <td id="square21"> </td> <td id="square22"> </td> <td id="square23"> </td> </tr> </table> <p><a href="file:///Macintosh HD/Users/jhumberger/Documents/script01.html" </body> </html> The Java Script: Code: window.onload = newCard; var usedNums = new Array(76); var images = [ 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpgg', 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg', 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg' ]; var image = images[newNum]; function newCard() { if (document.getElementById) { for (var i=0; i<24; i++) { setSquare(i); } } else { alert("Sorry, your browser doesn't support this script"); } } function setSquare(thisSquare) { var currSquare = "square" + thisSquare; var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4); var colBasis = colPlace[thisSquare] * 15; var newNum; do { newNum = colBasis + getNewNum() + 1; } while (usedNums[newNum]); usedNums[newNum] = true; document.getElementById(currSquare). innerHTML = newNum; } function getNewNum() { return Math.floor(Math.random() * 15); } Thanks for your help! Joe For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have: <script> click=1 function swap(What input do I need? the img src?){ if (click==1){ var1=imgsrc click=2 } else{ var2=imgsrc //then switch them so: x=var1 var1=var2 var2=x click=1 } } </script> hello people, can anyone help me with this? i have div element and picture inside it, and that picture is created with php gd (<img src="file.php"). What i need is a function which create new image and place it in that div. I don't know how to create new image with javascript when i call php file with header content type image. something like this?? function newImage(){ document.getElementById("foo").innerHtml = "<img src='file.php'/>"; } but of course this doesn't work so how to do that? thnx Hi Everyone, I have created 8 thumbnails of their larger full sized pictures. Next I created a "picdiv" with CSS attributes within a center division. The thumbnails sit just above the "picdiv". I need code to open the full pictures in the "picdiv" when I click on the thumbnail. I've tried an on-click function but can't get this working either. Can anyone help please? Anita how to automatic append picture to a list? check text in span,if it match today,a picture append after meeting(4-22) code like this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> .li_title { list-style-type:none; font-size:12px; line-height:24px; } .date {float:right;margin-right:3px;} </style> </HEAD> <BODY> <DIV id=Conttab_p_switch1 style="POSITION: relative"> <UL> <LI class="li_title"><span class="date">2011-04-22</span><A title=meeting(4-22) href="#" rel="nofollow" target=_blank>meeting(4-22)</A></LI> <LI class="li_title"><span class="date">2011-04-11</span><A title=meeting(4-11) href="#" rel="nofollow" target=_blank>meeting(4-11)</A></LI> <LI class="li_title"><span class="date">2011-04-04</span><A title=meeting(4-04) href="#" rel="nofollow" target=_blank>meeting(4-04)</A></LI> </UL> </DIV> </BODY> </HTML> how can I write on a picture with javascript? So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there) Code: <script> var change = new Array change [0] = [0,0,0,0,0]; change [1] = [0,0,0,0,0]; change [2] = ["",0]; change [3] = [0,0,0,0,0]; function equipaa(){ change [0][0] = 1 change [0][4] = 0 change [0][1] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipab(){ change [0][1] = 1 change [0][0] = 0 change [0][4] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipac(){ change [0][2] = 1 change [0][0] = 0 change [0][1] = 0 change [0][4] = 0 change [0][3] = 0 changea(); } function equipad(){ change [0][3] = 1 change [0][0] = 0 change [0][1] = 0 change [0][2] = 0 change [0][4] = 0 changea(); } function equipae(){ change [0][4] = 1 change [0][0] = 0 change [0][1] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipba(){ change [1][0] = 1 change [1][4] = 0 change [1][1] = 0 change [1][2] = 0 change [1][3] = 0 changefinal(); } function equipbb(){ change [1][1] = 1 change [1][0] = 0 change [1][2] = 0 change [1][3] = 0 change [1][4] = 0 changefinal(); } function equipbc(){ change [1][2] = 1 change [1][0] = 0 change [1][1] = 0 change [1][3] = 0 change [1][4] = 0 changefinal(); } function equipbd(){ change [1][3] = 1 change [1][4] = 1 change [1][0] = 0 change [1][1] = 0 change [1][2] = 0 changefinal(); } function equipbe(){ change [1][4] = 1 change [1][0] = 0 change [1][1] = 0 change [1][2] = 0 change [1][3] = 0 changefinal(); } function changea(){ if(change [0] [0] = 1){ change [2] [0] = document.getElementById("is1i").src; change [2] [1] = change [3] [0]; } else if(change [0] [1] = 1){ change [2] [0] = document.getElementById("is2i").src; change [2] [1] = change [3] [1]; } else if(change [0] [2] = 1){ change [2] [0] = document.getElementById("is3i").src; change [2] [1] = change [3] [2]; } else if(change [0] [3] = 1){ change [2] [0] = document.getElementById("is4i").src; change [2] [1] = change [3] [3]; } else if(change [0] [4] = 1){ change [2] [0] = document.getElementById("is5i").src; change [2] [1] = change [3] [4]; } } function changefinal(){ if(change [1] [0] = 1){ document.getElementById("i1").src = change [2] [0]; } else if(change [1] [1] = 1){ document.getElementById("i2").src = change [2] [0]; } else if(change [1] [2] = 1){ document.getElementById("i3").src = change [2] [0]; } else if(change [1] [3] = 1){ document.getElementById("i4").src = change [2] [0]; } else if(change [1] [4] = 1){ document.getElementById("i5").src = change [2] [0]; } clear(); } function clear(){ change [0] [0] = 0; change [0] [1] = 0; change [0] [2] = 0; change [0] [3] = 0; change [0] [4] = 0; change [1] [0] = 0; change [1] [1] = 0; change [1] [2] = 0; change [1] [3] = 0; change [1] [4] = 0; } </script> <html> <body> <table border="0"> <tr> <td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> </tr> </table> <div id="invent"> <table border="o"> <tr> <td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is1n"></div></td> <td><div id="is1d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is2n"></div></td> <td><div id="is2d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is3n"></div></td> <td><div id="is3d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropd()" onclick="equipad();"><img id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is4n"></div></td> <td><div id="is4d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="drope()" onclick="equipae();"><img id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is5n"></div></td> <td><div id="is5d"></div></td> <td></td> </tr> </table> </body> </html> Code: window.onload = function() { var vIframeUrl; vIframeUrl= document.getElementById("ifrBDiagram").src; if (vIframeUrl == "#" && document.getElementById("txtBnr").value == "") { document.getElementById("ifrBDiagram").src = "C://eBondingDiagram//Infineon.jpg"; } getIframeSize(); } function getIframeSize() { //Get window width and height var winW = 630, winH = 460; if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {//alert("in 2"); winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) {//alert("in 3"); winW = window.innerWidth; winH = window.innerHeight; } document.getElementById("ifrBDiagram").width = (winW * 0.95); document.getElementById("ifrBDiagram").height = (winH * 0.88); } Code: <table width="100%" height="100%" bgcolor="#CAD4E3" align="center" valign="center" style="border: 5px solid;"> <tr> <td><b>Bnr No:</b></td> <td><input type="text" id="txtBnr" name="txtBnr" /></td> <td> </td> <td> </td> </tr> <tr> <td><b>Lot No:</b></td> <td><input type="text" id="txtLot" name="txtLot" /></td> <td><INPUT id="btnCopy" TYPE="button" VALUE="Bonding Diagram" ONCLICK="fncCopy()"> <INPUT id="btnUpdate" TYPE="button" VALUE="End Lot" ONCLICK="reloadPage()"></td> <td> </td> </tr> <tr> <td><b>Failure Catalogues:</b></td> <td><select id="myList"> <option></option> <option>DSO</option> <option>Pre-Assembly</option> <option>PO EOL</option> <option>TDSON/TSDSON</option> <option>S308/WISON</option> </select> </td> <td><INPUT id="btnCata" TYPE="button" VALUE="Failure Catalogue" ONCLICK="fcnFailureCatalogue()"></td> <td> </td> </tr> <tr> <td colspan="4"> <iframe name="ifrBDiagram" id="ifrBDiagram" src=# style="border-width:4px; border-style:solid; border-color:blue;"> <span id="sMsg"></span> </iframe> </td> </tr> </table> When I first run the html , the interface just goes like this. After I press F5 to refresh the window, it displays this. The image just wont fit the iframe exactly. Can anyone please help to spot the bug ? I tried to use different resolution picture but still, the problem just doesn't solve. Is it really because of the image resolution ? Or something else gone wrong in my html ? Thanks Hi everyone, I'd really appreciate some help, I'm trying to make the menu of my website randomly change. I have 6 different image folders in which there are 7 pictures which all read the same things (menu, drawings, photo's etc) but in different writing. I want the website to (when refreshed, or when somebody clicks on one of the menu buttons) randomly pick a folder each time, and use the images of that folder. So the images are all the same name, just the folder needs changing. This is what I have so far (thanks to another forum aswell), which doesn't work. I'm very new to javascript... I can't really 'read' what is says, unlike html and/or css. I 'get' html and css. This really frustrates me. Help?!?! btw: I took everything out that doesn't concern this problem, for easier reading. Code: <html> <head> <title></title> <link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript"> function randomSort(a,b) { return( parseInt( Math.random()*6 ) %2 ); } var baseURL = 'http://www.SITE.nl/'; var mijnmenu = ['images/pl2/menubalpen','images/pl2/menugeo','images/pl2/menuinkt','images/pl2/menukleur','images/pl2/menupotlood','images/pl2/menusephia']; function randomizeMenu() { var rndMenu = mijnmenu.sort(randomSort); var menuObj= document.getElementById('menu').getElementsByTagName('img'); for (var i=0; i<menuObj.length; i++) { menuObj[i].src = baseURL+'/'+rndMenu[i]+'img'; } } </script> </head> <body onload="randomizeMenu()"> <div id="wrapper"> <div id="menu"> <a href="index.html"><img src="menu1.jpg" /></a> <a href="drawings.html"><img src="menu2.jpg" /></a> <a href="typo.html"><img src="menu3.jpg" /></a> <a href="photo.html"><img src="menu4.jpg" /></a> <a href="movies.html"><img src="menu5.jpg" /></a> <a href="other.html"><img src="menu6.jpg" /></a> <a href="contact.html"><img src="menu7.jpg" /></a> </div> <div id="largecolumn"> TEXT </div> </div> </body> </html> I have searched for a rotating image script to use at mrsgriffins.com and am currently using Tony Foster's Picture Cube slideshow downloaded from javascript.com. This is EXACTLY the effect I wanted, but it only works with IE since it uses MS-only code. Is there a similar script that is more universal? Thanks for any help! Why can I not change the initial picture from the menu? If I remove the initial image, the menu works as needed. However, when the initial image is used the script will not work. I desperately need the help of a real JS Guru. Frank Sorry. Here it is. |