|
JavaScript - Lightbox Opens And Then Closes Without Showing Pic
I can't seem to figure out what I am doing wrong. When you click the photo the script opens and then closes and never shows the slide show.
Test site : http://www.royalraves.com/test/html/pets.html Blackbox.css Code: #lightbox{
position: absolute;
top: 0px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #f7f6f1;
width: 250px;
height: 250px;
margin: 0 auto;
border: 1px #CCC solid;
border-bottom:0px;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
z-index: 0;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink2, #nextLink2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000;
font-weight:bold;
cursor:pointer;
}
#imageDataContainer{
font: 14px Arial, Helvetica, sans-serif;
background-color: #f7f6f1;
height: 35px;
border:1px #ccc solid;
border-top:0px;
margin:auto;
}
#imageData{
padding:0px 10px 10px 10px;
}
#imageData #imageDetails{ width: 50%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; font-size:11px; color:#666; max-height:20px; }
#imageData #numberDisplay{ display: block; clear: left; font-weight: normal; font-size:14px; color:#333; padding-bottom: 5px; }
#imageData #slideshowLink{ width: 55px; float: right; padding:5px 0px 0 0px;}
#imageData #bottomNavClose{ width: 55px; float: right; padding:5px 0px 0 0px; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
In Head: Code: <!--- JS Code for album ---> <link rel="stylesheet" href="backbox.css" type="text/css" /> <script type="text/javascript" src="js/prototype.compressed.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/dhtmlHistory.js"></script> <script type="text/javascript" src="js/customsignsheader.js"></script> Code: For the album:
<!--- Album Code for Pets --->
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Benjamin">
<img src="images/pets/7.jpg" alt="Benjamin" width="250" height="180" border="0" /></a>
</div>
<a href="images/pets/1.jpg" rel="lightbox[slide]" caption="Benjamin"></a>
<a href="images/pets/2.jpg" rel="lightbox[slide]" caption="Cat TV"></a>
<a href="images/pets/3.jpg" rel="lightbox[slide]" caption="Hamie"></a>
<a href="images/pets/4.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
<a href="images/pets/5.jpg" rel="lightbox[slide]" caption="Kita"></a>
<a href="images/pets/6.jpg" rel="lightbox[slide]" caption="Paws to you"></a>
<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
<a href="images/pets/8.jpg" rel="lightbox[slide]" caption="Yard Work"></a>
<a href="images/pets/9.jpg" rel="lightbox[slide]" caption="Yes"></a>
<a href="images/pets/10.jpg" rel="lightbox[slide]" caption="Best of Buds"></a>
</center>
</div>
<!--- End of Album Code--->
Similar TutorialsHello: I have the following div popup window: PHP Code: <div id='PopUp' style='display: none; position: absolute; height: auto; left: 13px; top: 10px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); opacity:.95; text-align: justify; font-size: 12px; width: 70%; z-index:1200;'> <iframe id="mate\" frameborder=0 scrolling=yes width=100% src='client_edit/edit_client_data.php?customerid=$customerid' height=\"790\" align=\"left\"></iframe><br /> <div valign=\"top\" style='text-align: right; display: inline; position: absolute; left: 10px; top: 10px;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp').style.display = 'none' \" ><span valign='left' style=\"text-decoration: underline;\" ><img border='0' src='images/the-delete.png' width='22' height='20' title='Close Window'></span></a> </div></div> the popup is opened from its parent page with the following onclick event: PHP Code: <a href="javascript:void(0)\" onmouseover=\"document.edit_info.src='images/edit-user-info2.png'\" onmouseout=\"document.edit_info.src='images/edit-user-info.png'\" onclick=\"document.getElementById('PopUp').style.display = 'block' \"><IMG SRC=\"images/edit-user-info.png\" NAME=\"edit_info\" width='40' height='40' title='Edit Customer Contacts' ALT=\"...\"></a> Now when the popup is closed, I would like the parent page to automatically refresh. I would appreciate some help on this. To close the popup, the following is invoked: PHP Code: <div valign="top\" style='text-align: right; display: inline; position: absolute; left: 10px; top: 10px;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp').style.display = 'none' \" ><span valign='left' style=\"text-decoration: underline;\" ><img border='0' src='images/the-delete.png' width='22' height='20' title='Close Window'></span></a> </div> Hello, and thanks for any help. I'm developing a site to include a map of schools (http://www.fcsoablues.net/map.asp). I'm creating hotspot links to googlemaps for each school (in a new browser window). I've got that much working okay. My problem is, I'd like to include popups for each hotspot that, on mouseover, show the name of the school. The popup should close on mouseoff. Without this, users only see the map full of school icons, and it's difficult to know which school is which. Ideally, the popup should follow the cursor (not a must, though). I've included the BODY of the code I'm using below. Code: <body> <img src="/FCSOA_IMAGES/Foothill-Citrus area map.jpg" width="1600" height="826" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="1169,166,1196,194" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=alta+loma+high+school&fb=1&gl=us&hq=alta+loma+high+school&hnear=0x80c32def799fa121:0x5209947000caa933,Pomona,+CA&ei=6x40T_WtDMaU2AXbtPnzAQ&sa=X&oi=local_group&ct=image&ved=0CAgQtgM&iwloc=cids:11113758998891877583" target="_new" alt="Alta Loma High School" /> <area shape="rect" coords="776,299,803,324" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=claremont+high+school&fb=1&gl=us&hq=claremont+high+school&hnear=claremont+high+school&cid=0,0,7887364383841814220&ei=Mh80T-LLBanm2QX4s72RAg&sa=X&oi=local_result&ct=image&ved=0CA8Q_BI" target="_new" alt="Claremont High School" /> <area shape="rect" coords="523,262,548,289" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=San+Dimas+High+School&fb=1&gl=us&hq=San+Dimas+High+School&hnear=San+Dimas+High+School&cid=0,0,9099100455580750144&ei=Wx80T7X9D6O-2gXU9YGeAg&sa=X&oi=local_result&ct=image&ved=0CA8Q_BI" target="_new" alt="San Dimas High School" /> </map> </body> I have a page with categories of images. When clicked, each image on the left opens a div with it's own gallery of thumbnails. http://myspringslandscaping.com/portfolio.html Right now, to close a div, the category image has to be clicked a second time. How can I set it so that when one div opens, the other closes automatically? The client wants only one category displayed at a time. Any help would be appreciated. Thanks! Marita Hi, I'm doing something wrong, I want my script to execute when the browser window opens, can someone please help me? Code: <p><iframe id="myFrame" style="display: none;" width="500" height="300"></iframe>
<script type="text/javascript">// <![CDATA[
window.onload=openpdf();
type="text/javascript">// <![CDATA[
function openPdf()
{
var omyFrame = document.getElementById("myFrame");
omyFrame.style.display="block";
omyFrame.src = "myFile.pdf";
}
// ]]></script>
For my Javascript class, we are to take a code from the book and add on to it. In this code, I decided to add custom markers and info windows for each location. I got the info windows to work but they are the same for each marker. How can I fix this? Here is what I have: Code: <script>
function init() {
var myLatLng = new google.maps.LatLng(36.795209, -3.339844);
var myOptions = {
zoom: 2,
center: myLatLng
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//This is Location 1
var image = 'image1.jpg';
var canyon= new google.maps.Marker({
position: new google.maps.LatLng(35.9766,-113.7717),
map: map,
title:"Grand Canyon, USA"});
var infoWindow = new google.maps.InfoWindow({
content: "Grand Canyon, USA"});
google.maps.event.addListener(canyon, 'click', function(){
infoWindow.open(map, canyon); });
//This is Location 2
var image = 'image2.jpg';
var paricutin= new google.maps.Marker({
position: new google.maps.LatLng(19.5948,-102.4331),
map: map,
title:"Paricutin, Mexico"});
var infoWindow = new google.maps.InfoWindow({
content: "Paricutin, Mexico"});
google.maps.event.addListener(paricutin, 'click', function(){
infoWindow.open(map, paricutin); });
//This is Location 3
var image = 'image3.jpg';
var victoria= new google.maps.Marker({
position: new google.maps.LatLng(-17.928,25.826),
map: map,
title:"Victoria Falls, Zimbabwe"});
var infoWindow = new google.maps.InfoWindow({
content: "Victoria Falls, Zimbabwe"});
google.maps.event.addListener(victoria, 'click', function(){
infoWindow.open(map, victoria); });
//This is Location 4
var image = 'image4.jpg';
var reef= new google.maps.Marker({
position: new google.maps.LatLng(-17.98,146.76),
map: map,
title:"Great Barrier Reef, Austrailia"});
var infoWindow = new google.maps.InfoWindow({
content: "Great Barrier Reef, Austrailia"});
google.maps.event.addListener(reef, 'click', function(){
infoWindow.open(map, reef); });
//This is Location 5
var image = 'image5.jpg';
var harbor= new google.maps.Marker({
position: new google.maps.LatLng(-22.8424,-43.1502),
map: map,
title:"Harbor Rio De Janerio, Brazil"});
var infoWindow = new google.maps.InfoWindow({
content: "Harbor Rio De Janerio, Brazil"});
google.maps.event.addListener(harbor, 'click', function(){
infoWindow.open(map, harbor); });
//This is Location 6
var image = 'image6.jpg';
var everest= new google.maps.Marker({
position: new google.maps.LatLng(27.98783,86.92476),
map: map,
title:"Mount Everest Peak, Nepal"});
var infoWindow = new google.maps.InfoWindow({
content: "Mount Everest Peak, Nepal"});
google.maps.event.addListener(everest, 'click', function(){
infoWindow.open(map, everest); });
}
google.maps.event.addDomListener(window, 'load', init);
</script>
Hi Friends, I am facing one problem that screw me left and right. Please share me if anyone of you faced this problem and solved already. I am using the below code to assign the javascript function on select on radio button. This may vary based on radio button selection. For some radio button selection the button will be disabled. if(yes) { document.getElementById("Name").href = "javaScript:functionA()"; document.getElementById("Name").onclick = "javaScript:functionA()"; }else { document.getElementById("Name").href = "#"; } This is the code i am using to activate the button or disable the button. For some causes i am getting "javaScript:functionA()" in the address bar instead of calling that java script method. So my new window is not showing me the correct result. Please some one advise me how to solve this problem. Thanks in advance. Regards, Jeva Hey everyone. Been racking my brain all day trying to figure out how to duplicate this code with the limited javascript knowledge I have been trying to learn. This code is a Dropdown menu of Yes or No, than a Select button that Opens up a Text Input directly below the dropdown. So far, It works great. My problem is I need at least two of these on the same page and I do not know how to go about it. I have tried changing values to accommodate adding another on the same form, but than both stop working. Can someone Please HELP! Thank you in advance. Code: <html>
<head>
<SCRIPT language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</head>
<body>
<label>
<SELECT name="element">
<OPTION value="text" name="refer_yes" id="refer_yes">Yes</OPTION>
<OPTION value="text" name="refer_no" id="refer_no">No</OPTION>
</SELECT>
<INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
</label>
<span id="fooBar"> </span>
</body>
<html>
I have written base rel="nofollow" target="_self" tag in head tag. It works fine in IE6 but not in IE8. window.showModalDialog() opens up new ModalDialog instead of using existing Dialog. Can anybody help me?
Hello I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel I am making a simple lightbox without using the silly plugins and I want to know how to make the lightbox resize equally when its being loaded. I can only get it expand from the corner, I want it to stretch down then widen but equally on both sides. this is the code im using: Code:
// Javascript
<script language="javascript">
$(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").animate({"height" : "400px"},2000);
$("#lightbox, #lightbox-panel").animate({"width" : "400px"},2000);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
});
});
</script>
// CSS
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
// HTML
<a id="show-panel" href="#" class="small">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#" class="small">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->
Hi, I am using Lightbox+ and overall it's very good for my needs. However it has a small problem that is causing me to loose hair, I have tried to fix it but my grasp of Javascript just isn't cutting it. If you goto http://serennz.sakura.ne.jp/toybox/lightbox/ and click on the image "Sample 2" then use the next arrow to go to "Sample 3" you have to hover off the image and then back on to get the previous and zoom icons to show again. I have been able to make the bug occur every time in both Firefox 3.6 and IE6. I am guessing the mouseover event isn't triggering correctly due to the image object moving underneath the mouse pointer but I just can't fix it. Any help, pushes in the right direction, anything. Cam. can some tell me how this image gallery with lightbox is done? I am trying to figure this out and was searching, but couldn't find how this was implemented with lightbox. http://www.davirusso.com/work/ 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 Figured it out... admin can delete.
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 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. 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. I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation? I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas? Thank you, Dustin I have been following a tutorial for an image gallery, i can upload images and use gd to create thumbnails that when clicked display the full sized image, but the full sized image is to big to fit in my design, i have managed to get the rel="lightbox" attached to the thumbnails as they are displayed but it wont load the full image, the loading ring just keeps going round, does anybody know how to fix this? is it even possible. BTW i am a complete beginner so please be gentle.
|
|||||||