|
JavaScript - Lightbox 2 Not Working In My Page
When i click on an image, it just opens in a new tab, lightbox doesn't work?!
PHP Code: $jq_add_div_strings = ''; $jq_div_classes_csv = ''; $counter = 0; //startarray $bikearray = array(); //$query = "SELECT * FROM wmb_members ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; //$query = "SELECT * FROM wmb_members LEFT JOIN wmb_pics ON wmb_pics.UserID=wmb_members.UserID ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; $query = "SELECT M.*, P.picid, P.filename " . " FROM ( SELECT * " . " FROM wmb_members " . " ORDER BY rsDateTaken DESC, UserID ASC " . " LIMIT " . $offset . "," . $rowsPerPage . " ) AS M " . " LEFT JOIN wmb_pics AS P " . " ON M.UserID = P.UserID " . " ORDER BY M.rsDateTaken DESC, M.userID ASC, P.picid ASC;"; //$query = "SELECT wmb_members.*, wmb_pics.* FROM wmb_members INNER JOIN wmb_members ON wmb_members.UserID=wmb_pics.UserID ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; $result = mysql_query($query); $num_rows = mysql_num_rows($result); //echo "DEBUG SQL: " . $query . "<HR>"; //echo "DEBUG: query returned " . $num_rows . " rows<hr>\n"; // remember the UserID of the prior row ... no prior row to start, so blank: $priorid = ""; while ($row = mysql_fetch_assoc($result)) { // get the UserID for the current row in the results $curid = $row['UserID']; // if not the same as the prior row, then create a new set of data in the bikearray: if ( $curid != $priorid ) { // I'm guessing that this stuff goes he $jq_add_div_strings .= "animatedcollapse.addDiv('jason$counter', 'hide=1', 'fade=1,height=180px')\n"; $jq_div_classes_csv .= "'jason$counter',"; // on firmer footing here...this should be right: // store main data array $bikearray[$curid]['UserID'] = $curid; $bikearray[$curid]['rsBikeman'] = $row['rsBikeman']; $bikearray[$curid]['rsBikemod'] = $row['rsBikemod']; $bikearray[$curid]['rsBikeyear'] = $row['rsBikeyear']; $bikearray[$curid]['rsBikecolor'] = $row['rsBikecolor']; $bikearray[$curid]['rsDatetaken'] = $row['rsDatetaken']; $bikearray[$curid]['rsLocation'] = $row['rsLocation']; $bikearray[$curid]['rsOtherinfo'] = $row['rsOtherinfo']; $bikearray[$curid]['rsLocpostcode'] = $row['rsLocpostcode']; $bikearray[$curid]['rsLocked'] = $row['rsLocked']; $bikearray[$curid]['lockType'] = $row['lockType']; $bikearray[$curid]['frontSus'] = $row['frontSus']; $bikearray[$curid]['rearSus'] = $row['rearSus']; $bikearray[$curid]['frontLight'] = $row['frontLight']; $bikearray[$curid]['rearLight'] = $row['rearLight']; $bikearray[$curid]['bikeBell'] = $row['bikeBell']; $bikearray[$curid]['bikeBasket'] = $row['bikeBasket']; $bikearray[$curid]['bikeBag'] = $row['bikeBag']; $bikearray[$curid]['rsUser'] = $row['rsUser']; $bikearray[$curid]['rsEmail'] = $row['rsEmail']; // How do you specify an empty array in PHP?? $bikearray[$curid]['pictures'] = array(); // This is how many pictures there are for current UserID: $piccount = 0; $counter++; // and change priorid for the match test at top of loop $priorid = $curid; } // then regardless if new userid or a repeated userid... // see if this record has a valid (non null, non blank) filename: $pic = $row['filename']; if(!empty($pic)) { // yes...a valid filename...so add it to the array $bikearray[$curid]['pictures'][$piccount] = $pic; // and count it ++$piccount; } } $jq_div_classes_csv = rtrim($jq_div_classes_csv,","); $bikearray_html = array(); $i = 0; foreach ($bikearray as $id=>$DETAILS) { @$bikearray_html[$i] .= "<div id=\"pubholder\" class=\"wrap\">"; $bikearray_html[$i] .= "<div class=\"entry_header\">"; $bikearray_html[$i] .= "<a href=\"javascript:animatedcollapse.show('jason$i')\" >show more details ></a> "; $bikearray_html[$i] .= "<a href=\"javascript:animatedcollapse.hide('jason$i')\" >hide ^</a>"; $bikearray_html[$i] .= "<div><b>".$DETAILS['rsUser']."'s ".$DETAILS['rsBikeman']." ".$DETAILS['rsBikemod']."</b> was taken from <b>".$DETAILS['rsLocation']."</b> on <b>".$DETAILS['rsDatetaken']."</b></div>"; $bikearray_html[$i] .= "<div id=\"jason$i\">\n"; $bikearray_html[$i] .= "</br></br>"; $bikearray_html[$i] .= "<b>Owners email:</b> <a href=\"mailto:".$DETAILS['rsEmail']."\"> ".$DETAILS['rsEmail']."</a></br>"; $bikearray_html[$i] .= "<b>Bike year:</b> ".$DETAILS['rsBikeyear']." </br>"; $bikearray_html[$i] .= "<b>Bike color:</b> ".$DETAILS['rsBikecolor']." </br>"; $bikearray_html[$i] .= "<b>Locked:</b> ".$DETAILS['rsLocked']." </br>"; $bikearray_html[$i] .= "<b>Lock type:</b> ".$DETAILS['lockType']." </br>"; $bikearray_html[$i] .= "<b>additional extras:</b></br> <i> Front suspension: ".$DETAILS['frontSus']."</br> Rear suspension: ".$DETAILS['rearSus']."</br> Front Light: ".$DETAILS['frontLight']."</br> Rear Light: ".$DETAILS['rearLight']."</br> Bell: ".$DETAILS['bikeBell']."</br> Basket: ".$DETAILS['bikeBasket']."</br> Bag: ".$DETAILS['bikeBag']."</i></br>"; $bikearray_html[$i] .= "<b>Other info:</b> ".$DETAILS['rsOtherinfo']." </br>"; if(!empty($DETAILS['pictures'])){ foreach($DETAILS['pictures'] as $piccount => $pic){ [B]$bikearray_html[$i] .= "<a href=\"upload/".$pic."\" rel=\"lightbox[bikes]\" border=\"0\"><img src=\"upload/".$pic."\" height=\"75\" width=\"100\" \></a>[/B] "; // do what you want here } }else{ // no picture for this user } $bikearray_html[$i] .= "</br>"; $bikearray_html[$i] .= "</div>\n"; $bikearray_html[$i] .= "</div>\n"; $bikearray_html[$i] .= "</div>\n"; $i++; } mysql_close($link); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>Stolen Bikes, mountain bikes, bmx bikes, Other cycles and bicycles in the UK</title> <meta name="description" content="Website to help people get their stolen bikes back" /> <meta name="keywords" content="stolen, thief, mountain bike, bicycle, UK, nicked, MTB" /> <meta name="Content-Language" content="en-gb" /> <meta name="robots" content="FOLLOW,INDEX" /> <meta name="revisit-after" content="2 days" /> <meta name="copyright" content="www.wheresmybike.co.uk" /> <meta name="author" content="www.mutecms.com - Professional web site design in the south uk, worthing, brighton" /> <meta name="distribution" content="Global" /> <meta name="resource-type" content="document" /> <script type="text/javascript"> swfobject.registerObject("myId", "9.0.0", "expressInstall.swf"); </script> [B]<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />[/B] <link rel="stylesheet" type="text/css" href="css/reset-style.css" /> <link rel="stylesheet" type="text/css" href="css/sitestyle.css" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> [B]<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/external.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>[/B] <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/jva.js"></script> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="animatedcollapse.js"></script> <script type="text/javascript"> animatedcollapse.init() <?php echo $jq_add_div_strings; ?> </script> </head> <body> <div id="doc"> <div id="hd"> <h1>Where's my bike?</h1> <div class="manbike"></div> <div class="cctv"></div> <ul> <li><a href="default.php" title="Homepage and News">home</a></li> <li><a href="bike.html" title="Featured Bike">the bike</a></li> <li><a href="thieves.html" title="Featured Thief">the thief</a></li> <li><a href="cctv.html" title="CCTV Footage">the CCTV</a></li> <li><a href="signup.php" title="Sign Up">sign up</a></li> <li><a href="stolen-bikes.php" title="Stolen Bikes">stolen bikes</a></li> <li><a href="login.php" title="Login">login</a></li> <li><a href="yoursay.php" title="Have your say">your say</a></li> <li><a href="forum.html" title="Forum">forum</a></li> </ul> </div> <div id="bd"> <div class="yui-g"> <div class="topcontent"> </div> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> <a href="javascript:animatedcollapse.show([<?php echo $jq_div_classes_csv; ?>])">show all<img src="images/down.gif" border="0" /></a> <a href="javascript:animatedcollapse.hide([<?php echo $jq_div_classes_csv; ?>])"><img src="images/up.gif" border="0" />hide all</a> <?php foreach ($bikearray_html as $html) echo $html; ?> <?php echo $first.$prev; ?> Showing page <strong><?php echo $pageNum;?></strong> of <strong><?php echo $maxPage;?></strong> pages <?php echo $next.$last; ?> </div> </div> <div id="ft">Site created by: <a href="http://www.jbiddulph.com">jbiddulph.com</a></div> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-2434589-16"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> http://www.wheresmybike.co.uk/stolen-bikes.php?page=2 Similar TutorialsOk, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. Hi for some reason my lightbox, downloaded from (huddletogether/projects - Lightbox 2) isn't working. I have a javascript slider that IS working on the page aswell You can view a test page here http://www.spmcreative.co.uk/patrickedward/gallery.html (only the first thumbnail is clickable) I have attached some code below, please let me know if you need to see any more, Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Patrick Edward Diamonds</title>
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<link rel="stylesheet" href="CSS/screen.css" type="text/css" media="screen" /><br />
<link rel="stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(img/MainBG.gif);
background-repeat: repeat;
}
a:link {
color: #999;
text-decoration: none;
border:0;
}
a:visited {
text-decoration: none;
color: #999;
border:0;
}
a:hover {
text-decoration: none;
color: #000;
border:0;
}
a:active {
text-decoration: none;
border:0;
}
</style>
</head>
<body>
<div id="container">
<div id = "header">
<div class = "logo">
<a href="index.html">
<img src="img/logo.png" alt ="Patrick Edward Diamonds" />
</a>
</div>
<ul id="nav">
<li><a href="index.html"> Home |</a></li>
<li><a href="collections.html"> Collections |</a></li>
<li><a href="design.html"> Design Service |</a></li>
<li><a href="trade.html"> Trade Service |</a></li>
<li><a href="gallery.html"> Design Gallery |</a></li>
<li><a href="contact.html"> Contact Us</a></li>
</ul>
</div> <!--end of header-->
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="2"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="3"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="4"><img src="img/bullet.png" alt="" /></a>
</div>
</div> <!--end of banner-->
<div id="main1">
<p><img src="img/gallery.png" alt="Gallery" /></p>
<div class="album">
<div class="imageSingle">
<div class="image"><a href="img/Lgallery1.jpg" rel="lightbox" title="my caption"><img src="img/gallery1.jpg"/></a></div>
</div>
Thanks, Simon Hi everyone, My page with my slideshow (with lightbox integrated) is up and running fine on browsers like Firefox, IE, and Google Chrome... But Safari doesn't even show the slideshow. www.bobbivanstudio.com/work.php Any ideas why? Thanks in advance! Hi, i have recently just built a simple website and have started to add some added editions one being the lightbox. i am using dreamweaver cs3 and on a mac laptop, so in safari it works brillaint no problems what so ever. but as soon as you load it in internet explorer the light box opens but it displays a 404 error on the first image of every gallery, on every different profile? if anyone would help that would be fantastic http://www.goodeveningladies.co.uk/profiles.co.uk Code: <a href="../images/lrgimages/adam/AdamLrg.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<img src="../images/Adam.jpg" alt="" width="450" height="200" align="middle" />
<a href="../images/lrgimages/adam/1.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/2.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/3.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/4.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/5.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/AdamLrg.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]"></a>
here is a section of the coding that i use for each image obviously the names have changed and the directories have changed for each profile. any help would be much appreciated. Hey All, I replied in another thread asking about this, but I figured it would be best to have a separate thread for it. I'm trying to use lightbox (Video Lightbox) to not just open a video when clicking on a thumbnail image, but a mock "page" of several videos, where the main video plays, but there are surrounding thumbnail images that can then also be selected to play in the main player. Has anyone ever done anything like this? I've seen it done elsewhere, but wasn't sure how to actually implement it. Any suggestions would be appreciated. Thanks. Hi, I have a page here http://95.131.66.39/~pestcont/autosearch/form_new.html As you will see in the product model number once you start typing the page looks up the info from the database. The problem was the page was very long so i have taken the javascript and placed it in a seperate file, however now the auto look up doesn't work and i can not work out why. The second page is he http://95.131.66.39/~pestcont/autosearch/new_form.html Any help would be appreciated. thanks The golf ball is supposedly to come out and bounce across the screen and land in the word golf. Code:
<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
The Golf Page
Author: Cheryl Ashworth
Date: July 12, 2010
Filename: golfpage.htm
Supporting files: ball.gif, clouds.jpg, golf.js, golfer.gif, styles.css
-->
<title>The Golf Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="golf.js" type="text/javascript"></script>
<script type="text/javascript">
var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
-340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
-267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
-193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
-120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
-71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
-34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);
var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
-290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
-245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
-164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
-36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
-41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
-42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);
var index=0;
function moveBall()
{
if (index<=x.length-1) <!-- length check -->
{
placeIt("Ball", x[index], y[index]);
index++;
setTimeout("moveBall()",5)
}
else
{
showIt("Slogan");
}
</script>
<!-- External Javascripts -->
<script src="Golf.js"></script>
</HEAD>
<!-- Body -->
<BODY onLoad="moveBall()">
<!-- Title -->
<DIV ID="Title"
STYLE="padding-left:395;padding-top:260;padding-bottom:0;
border-style:solid; border-width:1 3 3 1; border-color:blue;
background-color:rgb(0,255,0)">
THE G<SPAN ID="Ball"STYLE="position:relative;left:0;top:0"><IMG SRC="Ball.gif" BORDER=0></SPAN>LF PAGE
</DIV>
<!-- Slogans -->
<DIV ID="Slogan"
STYLE="color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold; position:absolute; left:120; top:100; z-index:2;visibility:hidden">
Your Online Source of Golf Equipment
</DIV>
<DIV ID="Slogan2"
STYLE="color:white; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold; position:absolute; left:121; top:101; z-index:1;visibility:hidden">
Your Online Source of Golf Equipment
</DIV>
<!-- End -->
</BODY>
</HTML>
*/ JS Script Code: Function List:
placeIt(id, x, y)
Places the id object at the coordinates (x, y)
showIt(id)
Shows the id object by setting the object visibility to "visible"
getFontSize(id)
Retrieves the font size of the id object
setFontSize(id, fs)
Sets the font size of the id object to fs
changeFontSize(id, dfs)
Changes the font size of the id object by dfs
*/
function placeIt(id, x, y) {
// Places the id object at the coordinates (x,y)
object=document.getElementById(id);
object.style.left=x+"px";
object.style.top=y+"px";
}
function getFontSize(id) {
// Returns the font size of the object with the value id
object=document.getElementById(id);
size=parseInt(object.style.fontSize);
return(size);
}
function setFontSize(id, ptsize) {
// Sets the font size of the object with the value id
object=document.getElementById(id);
object.style.fontSize = ptsize + "pt";
}
function changeFontSize(id, dfs) {
// Returns the font size of the object with the value id
fs = getFontSize(id);
setFontSize(id, fs+dfs);
}CSS
*/ Code: This file contains styles used in the golfpage.htm file Code:
body {font-family:Arial, Helvetica, sans-serif; font-size: 18pt;
color:blue; background-image: url(clouds.jpg)}
#Title {position: absolute; left:395px; top:260px}
#Ball {position:relative; top:0px; left:0px}
#Ball img {border-width: 0px}
#box {width:600px; height: 250px;
border-style:solid; border-width:1 4 4 1; border-color:blue;
background-color:rgb(0,255,0); text-align: center}
#slogan {visibility: hidden; position: relative; top: 50px;
color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold}
*/ Hey: I have two javascripts on my page but one isn't showing with both codes in page. [CODE]<script type="text/javascript" src="js/image-slideshow.js"></script>[ICODE] The above code is for the image slide. When this is in the html the other one doesn't work (a text changer). The wbesite is http://www.uwics.com/constitution.htm There is no text at the top of the page currently. If you check Home you'll see how it should be. Any help would be greatly appreciated. Thank you, Mitka I have a tab that scrolls through images in a frame through javascript. It works in one page, but not the other. I'm trying to get the page not working to work, obviously. I also have checked and temporarily fixed validation errors, and that doesn't help. Working page: www.happydogwebproductions.com Same images in different page: http://www.happydogwebproductions.co...--css-websites I've been trying the "BDirect lists" on both pages. Java: "new SimpleSlide". Just when I think I am close, I can't get it to work. Going mental. Thanks for any help Hi .. I should start off saying I dont know the first thing about java script programming. I have 3 scripts on one of my pages, the first script is for a slide animation, the second is a hover intent script and the third is a headline animation script. I know if I comment out the hover intent script, the first and third script work. So my question is how to get the hover intent script to work correctly and behave with the other 2 scripts on the page. I read your post on "on body load" or "runscripts" calls with 2 scripts but I could not find such calls in these 3 javascripts. The hover intent script does not do what I want it to do on any of the pages that I have installed it on. When you first load the page the menu items are sitting above the slideshow and when you hover your mouse over the navigation from left to right they sort of jump and its not until you get to the contact image at the end that the slideshow moves into the correct position and then if you go back and hover over the home image the slideshow jumps up and down. The three script page is http://www.kimberleywebdesign.com.au/test/reviews.html Thanks in advance for your valuable time. Hi All I have page peel on my site www.lightuplondon.com which works in firefox but not in internet explorer, but can't work out why? If any one can help me with this it would be much appreciated. Thanks Stewart I am trying to use these two js codes in one page: http://acrisdesign.com/2010/03/jquer...on-hoverclick/ http://www.huddletogether.com/projects/lightbox2/ They both work perfectly fine except when both linked up at the same time. Only the last one will work. I've tried to find how the codes are working when the page loads in order to fix that problem but I cant figure it out for these two specific codes. Thanks. Hey guys, On my personal website, I just created a rollover image gallery using Javascript. Each time you roll over a thumbnail, the image above changes to the corresponding thumbnail image. http://www.thelittlelizzard.com/Bahamas.html After spending hours getting that to work properly, my footer is now showing as one huge blue link. I believe I'm forgetting to close a tag somewhere? Being new to Javascript, I don't have a clue what I am forgetting to close to cause my footer to become a huge blue link like that. Does anyone have any ideas? Here is a copy of the code of my body section where I believe the problem may be... Code: <p>Where we stayed: <a href="http://www.starwoodhotels.com/sheraton/property/overview/index.html?propertyID=3067" onclick="window.open(this.href);return false;">Radisson Cable Beach Resort</a> (Now called Sheraton Nassau Cable Beach): </p>
<p>Dates we travelled: March 2004, 2005 and 2006</p>
<p>Flight Time from New York: 2.5 hours</p>
<br /><br />
<div id="divcenter">
<p><img align="center" border="0" src="Bahamas/bahamas.jpg" style="border-right: 1 solid #006666" name="altimg" width="548" height="316" /> </p>
<p>
<a onmouseover="on('image1');" onmouseout="off('image1')">
<img src="Bahamas/bahamas.jpg" width="45" height="45"></a>
<a onmouseover="on('image2');" onmouseout="off('image2')">
<img src="Bahamas/bahamas-1.jpg" width="45" height="45"></a>
<a onmouseover="on('image3');" onmouseout="off('image3')">
<img src="Bahamas/bahamas-2.jpg" width="45" height="45"></a>
<a onmouseover="on('image4');" onmouseout="off('image4')">
<img src="Bahamas/bahamas-3.jpg" width="45" height="45"></a>
<a onmouseover="on('image5');" onmouseout="off('image5')">
<img src="Bahamas/bahamas-4.jpg" width="45" height="45"></a>
<a onmouseover="on('image6');" onmouseout="off('image6')">
<img src="Bahamas/bahamas-5.jpg" width="45" height="45"></a>
<a onmouseover="on('image7');" onmouseout="off('image7')">
<img src="Bahamas/bahamas-6.jpg" width="45" height="45"></a>
<a onmouseover="on('image8');" onmouseout="off('image8')">
<img src="Bahamas/bahamas-7.jpg" width="45" height="45"></a>
<a onmouseover="on('image9');" onmouseout="off('image9')">
<img src="Bahamas/bahamas-8.jpg" width="45" height="45"></a>
<a onmouseover="on('image10');" onmouseout="off('image10')">
<img src="Bahamas/bahamas-9.jpg" width="45" height="45"></a>
<a onmouseover="on('image11');" onmouseout="off('image11')">
<img src="Bahamas/bahamas-10.jpg" width="45" height="45"></a>
<a onmouseover="on('image12');" onmouseout="off('image12')">
<img src="Bahamas/bahamas-11.jpg" width="45" height="45"></a>
<a onmouseover="on('image13');" onmouseout="off('image13')">
<img src="Bahamas/bahamas-12.jpg" width="45" height="45"></a> <a onmouseover="on('image14');" onmouseout="off('image14')">
<img src="Bahamas/bahamas-13.jpg" width="45" height="45"></a> <a onmouseover="on('image15');" onmouseout="off('image15')">
<img src="Bahamas/bahamas-14.jpg" width="45" height="45"></a> <a onmouseover="on('image16');" onmouseout="off('image16')">
<img src="Bahamas/bahamas-15.jpg" width="45" height="45"></a> <a onmouseover="on('image17');" onmouseout="off('image17')">
<img src="Bahamas/bahamas-16.jpg" width="45" height="45"></a> <a onmouseover="on('image18');" onmouseout="off('image18')">
<img src="Bahamas/bahamas-17.jpg" width="45" height="45"></a> <a onmouseover="on('image19');" onmouseout="off('image19')">
<img src="Bahamas/bahamas-18.jpg" width="45" height="45"></a> <a onmouseover="on('image20');" onmouseout="off('image20')">
<img src="Bahamas/bahamas-19.jpg" width="45" height="45"></a> <a onmouseover="on('image21');" onmouseout="off('image21')">
</div>
</div>
<div id="footer">
<p>© 2009 TheLittleLizzard.com<br>
All images and content on this website are owned by The Little Lizzard.</br>
</p>
<p>All rights reserved. </p>
<p><a href="http://www.TheLittleLizzard.com">Home</a> <a href="http://www.ScreamingLizzardProductions.com" onclick="window.open(this.href);return false;">Site Design</a></p>
</div>
</div>
</body>
Thanks again for any help. This is one of the only places I get real answers that solve my problems! I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right: http://www.javascriptkit.com/script/...ifferent.shtml I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that. there is a javascript glider that requires them both to be on the same page. link to the page here . . . http://www.sunupdesignbuild.com/NEW/index.html appreciate your help thank you T Hi all, I have a script that checks and unchecks all boxes depending on the current state of the box. I have used it on one page and it works perfectly fine... copied it over to a new page where I wanted to reuse and can't get it to work. Code: <script type="text/javascript">
function check_all(form, input_name, self){
if(!input_name){
return;
}
var input = form.getElementsByTagName('input');
for(var i = 0; i < input.length; i++){
if(input[i].name.indexOf(input_name)!=-1){
input[i].checked = self.checked;
}
}
}
</script>
Code: <input type="checkbox" name="notimportant" onclick="check_all(document.form1, 'check', this)" value="test" /><b>All</b> Code: <input type="checkbox" name="check_list[]" value="<?php echo $row2['email'];?>"> Code: <form name="form1" action="emailspecificcandidates.php" method="post"> As I say this script works perfectly on another page, and as far as i can see i have copied everything over correctly. Can anyone spot anything wrong? Many thanks, Greens85 EDIT: I think this may be broken because of the way I presenting it with php on my page... i copied a seperate entity of the script onto the page and it worked first time. hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;
var queryString = "?datepicker=" + datepicker;
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
datecheckRequest.send(null);
}
Hello. Am I missing any coding or anything? I'm really confused and have yet to find any help. I got the instructions from http://www.huddletogether.com/projects/lightbox2/ I would go to their forums but haven't received an approval email for over a week. Odd. Anyway, here is my link with the sample thumbnail. It opens the image in a new page. Thanks! http://creativepink.net/packaging.php http://www.fotoderyadijital.somee.co...cekimleri.html why my gallery is too slow when i double click the image is it about lightbox script or images is too big size. can you check for me. I've never done java script, but I need this lightbox effect and I can never figure it out! http://www.youtube.com/watch?v=_Vv0QVP2CzE there's one tutorial I tryed, but for some reason, the light box never works, it always just opens in a new window. The website I got the codes from http://www.lokeshdhakar.com/projects/lightbox2/#how says that if it doesn't work there must be a conflicting code, but I don't have anything that I would see that would be conflicting this. I'm just trying to get a simple effect on a tutorial website I am creating so you can click the image and it enlarges in the lightbox. Can anyone help me out here? I really would like to figure out this effect. Thanks Hi, could someone please tell me what I'm doing wrong with this page? http://www.silvergatehomes.com/customhomestest.html I've tried a bunch of things and cannot figure out what I'm doing wrong. Thanks. P.S. The reason I'm writing is because the images aren't opening. |
|||||||