JavaScript - Onload Image Lightbox Popup With Exit

Greetings.

I am using an image galery script written by another person - frogjs (http://www.puidokas.com/portfolio/frogjs/)

This script is showing current pic in the middle of the screen and next/previous little tumbnails on right/left sides of the current. When you click the next pic, current pic is zoomed out to the left and next pic is zoomed in to the middle, then replaced by a full-size pic. Then a new tumbnail appears on the place of the next pic you clicked.

Zooming and stuff is done with another thirdparty script "effects" (script.aculo.us effects.js v1.7.0)

My problem is, the actual next tumbnail is not being shown until the big image is preloaded for this thumbnail. This is done to make it look smooth. So, when i click "next" picture, the next picture is shown, but switching to the following one is delayed until that following one is actually loaded.

It is done by making an imgpreloader=Image() object and setting imgpreloader.onload to a function, then setting imgpreloader.src to the big image path. The big image then is supposed to be automatically loaded by browser. When its done, an onload event should fire and that should execute the function that shows the thumbnail for the big picure.

Problem is, sometimes the onload event won't happen! And since it wont happen, my gallery will "stall" - it will never show next thumbnail and never allow to continue viewing. And if i show next thumbnail immediately, the next picture would be shown partially and that does not look good. Moreover, i've seen numerous image galeries on numerous sites and all of them seem to work with onload because i only see the image when its loaded, until that i see some "wait" or "grey screen" thing. Never had a problem with those stalling.

Problem happens mostly with Opera and Chrome and happens seldom with IE.

So, question is, do you probably know what can prevent browsers from firing and OnLoad event or from loading a picture when its suppied as an src for an Image() object? Do you know a workaround that can "poke" the browser to remind it to get the damn picture again and not to stall.

Hi CF,

I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle.

I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page.

This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth).

Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width.

I've tried maybe a dozen different scripts, but here's my most recent:
Code:

function testImage(){
	if (defaultImage.naturalWidth > 320){
		wideMode = true;
	} 
	placeImage();
}

function loadFirstImage(){
	defaultImage.src = "images/myGIF.gif";
	defaultImage.onLoad = testImage();
}

Any ideas on how to accurately get an image object's width after loading, but before placing it on the page?

Any help is much appreciated.

Thanks,
~gyz

First off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image.

Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated.

Thanks!

[CODE]

<a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
<script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script>

[CODE]

Hello, I would like some help with a two stage display of thumbnails. I have managed to display all thumbnail product images of my targetId in a scrolling div from the contents of my targetId image folder. I have also managed to display the thumbnail as a larger image in a html image. I would now like to apply a href link to the larger image so that I can display using jsquery lightbox, but I can't figure out what code i need and where it should go. Please help!

Code:

<head>
<script type="text/javascript">
 function replaceImg(path) {
 	var imgDest = document.getElementById('image');
	var imgSrc = path;
	imgDest.setAttribute("src", imgSrc);
	}
</script>

</head>
<body>

    <div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>

    <div class="gallerypics"><?php
		$counter = 0; 
     foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
    {
        $filename = basename($pathToThumb);
        echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
        $counter++;
    }
?>

</body>

I would like to add a Lightbox like image display function to TinyMCE. What is a good approach in the regard, integration or extension?

Thank for your input in advance.

Hello there.

I'm using Joomla 1.5 and VirtueMart for my e-shop. I've also installed a virtuemart template which loads mootools.

Well in my virtuemart product detail pages, if you click the main image to make it enlarged using IE8 it will not open and return a JS error instead (found it using Firebug): http://goo.gl/6lQCV

Code:

Message: 'closeButton' is null or not an object 
Line: 21 
Char: 63 
Code: 0 
URI: http://www.xxxxx.xxx/media/system/js/mootools.js

I'm not sure but I think that if I fix the JS errors on these pages the problem will be solved and the images will open normally. Note that on all other browsers it works fine (Firefox, Chrome, Safari, IE9).

The page returns some other errors too but they're the whole time there. I think there's a conflict caused by all the JS libraries loaded by my Plugins (System - RokBox & YOOeffects), Joomla template, VirtueMart & VirtueMart template (jquery and mootools are both loaded).

Thanks in advance

Hi,
Im new with java script.
I have a doubt.
Im building an html web site.
How to create a image pop up while opening a page, with a close button.
Pls anyone share the code.

thanks

I have searched high and low to find this script. Not having much luck at all.

What i want to do is, when someone clicks a link the image pops up on screen in its own nice window smack down in the middle of the screen over top of the website.

I want it to look neat tho, best example i can find is @ curse.com

http://wow.curse.com/downloads/wow-a...st-helper.aspx

If you click that link and scroll down to the screen shot section and click on one of the images you can see how nice and professional it looks.

How can i accomplish this?

Thanks so much in advance~

folks., i need to popup image on image hover?the image should be placed just above mouse pointer? i tried to implement event.x,event.y.. but it is not positoning well in all browsers..?is css need to be used here or please give me javascript code...
this is the code
function Large(obj,id,e)
{
// this is div tag,inside div i am placing imagebutton..

var imgbox=document.getElementById("imgbox");
var imgbtn=document.getElementById('<%=ImageButton3.ClientID%>');
imgbox.style.visibility='visible';
imgbtn.src=obj;
imgbox.style.left=event.x;
imgbox.style.top= event.y;
}
thank you

Hi Friends,

I am setting focus in popup window .in IE it is working properly but in mozilla the same code is not able to set focus on image.please tell me the solution if u knows.

My code is follows...myJsp.jsp==========

<div class="smallDottedBlueLink" >
<a title="" class="smallDottedBlueLinkAnchor" href="#" onkeypress="setFocusOnKeyPressPopUp(event);" onclick="setFocusOnClickPopUp();"
id="Hotels_TnC_popUp">View Terms and Conditions</a>
//focusNew1 is the id of the image in popup page.
function setFocusOnKeyPressPopUp(event){
setTimeout('document.getElementById("focusNew1").focus();',1000);
// setTimeout('dummy();',3000);
}

function setFocusOnClickPopUp() {
setTimeout('document.getElementById("focusNew1").focus();',1000);
} </div>


=============html page===============popup code ====
<div>
<div class="popup-top-corner-left-img"></div>
<div class="popup-top-image"></div>
<div class="popup-top-corner-right-img"></div>
</div>
<div>
<div class="popup-left-image"></div>
<div class="popup-div1">
<div>
<div class="XX-Large-Dark-Gold-popUpText">ffffff</div>
//id="focusNew1" for this id i need to set focus <div class="sprite-btn-close" id="focusNew1" onkeydown="javascript:return keyCheck(event)" onkeypress="javascript:closePopUpLayer1(event)" onclick="javascript:closePopUpLayer(),document.getElementById('Hotels_TnC_popUp').focus();" ></div> </div>
<div class="popup-dark-gray-text">fff</div>
</div>
<div class="popup-right-image"></div>
</div>
<div class="popup-bottom">
<div class="popup-bottom-corner-left-img"></div>
<div class="popup-bottom-image"></div>
<div class="popup-bottom-corner-right-img"></div>
</div>

please let me know in case any mistake i made ...its very urgent.
ThanksIn advance.

I'm an online web design student and i'm currently taking a javascript class
Ive used java in the past but that was ten years ago so ive been spending time refamiliarizing myself with it
I've ran into a problem with the popup coding I was given to use
I have to take this image gallery and make the image thumbnails pop up into the larger view of the image using just the java pop up window, but somehow for some reason my coding is opening up the image in both windows, the window that the thumbnails are on and the separate window, its frustrating me to death! i have to keep hitting the back button on the main page whenever i click on an image link because it opens it in both windows simultaenously. i have to submit the project because it's due but i want to work on getting this problem resolved for the future. I've attached a plain text notepad document to my post so you can see the coding

I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window.
Pathetic sitelock.com will offer no support in getting this in a popup window.

I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else.

My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want.

Here is the code that sitelock.com gave me:

<a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a>

Any help is appreciated

Here is an extract of my coding

Code:

function displayTitle(name) {
return name + " <a href='#' ><img src='direction.png' alt='Get driving directions'/></a>";

I have a map inserted into my aspx page.
When I click on one icon, the name and the direction.png picture will appear as a pop up box within the map

I want to make the direction.png picture into a link, whereby when I click on it, a pop up box will appear.

How?

Hi ,

Pls solve it

Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading.


what might be the problem ..pls solve it .......its too urgent

thanks in advance

nagaraja kharvi

Hello everyone. I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover. Thanks.

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
<table>
<tbody>
<tr>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867796.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851557.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867803.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851637.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867802.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851627.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867799.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851597.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867797.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851567.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867798.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851577.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867800.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851607.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867801.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851617.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867804.jpg" /></a></td>
</tr>
</tbody>
</table>
<table width="270" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856598.jpg');"><img width="96" height="100" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856097.jpg" /></a></td>
<td style="text-align: center;"><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856227.jpg');"><img width="65" height="100" border="0" align="middle" src="http://entrixsports.com//ir/oi/1000954/1856098.jpg" alt="" /></a></td>
<td style="text-align: right;"><a href="http://entrixsports.com/linkTo/1304219/1000954" rel="nofollow" target="_blank"><img width="60" height="102" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856099.JPG" /></a></td>
</tr>
</tbody>
</table>