/    Sign up×
Community /Pin to ProfileBookmark

Suggestions for Image viewers/galleries needed

Copy linkTweet thisAlerts:
Feb 25.2005

Hi,
If anyone could suggest a java script that does best at the following;
I would like to be able to click on my photos to get a pop-up with an enlarged view.
Problem; All scripts I have tried, I cannot figure out how to get my pictures linked properly; Any help would be sooooo appreciated!!!
Thanks!
S
? and new at this stuff

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@Warren86Feb 25.2005 — <HTML>

<Head>

<Script Language=JavaScript>

var largerView = "";
var winToggle = false;

function openFullSize(Pix){

if (winToggle == true){largerView.close()}
document.getElementById('nullIMG').src = Pix;
wStr = document.getElementById('nullIMG').width;
offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
hStr = document.getElementById('nullIMG').height;
offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
tStr = (screen.availHeight-50-offsetH)/2;
tStr = "top="+tStr;
largerView = window.open(Pix,"FullSize","toolbar=0,status=0, "+tStr+","+lStr+","+wStr+","+hStr+" ");
largerView.document.images[0].alt = "This is a description";
winToggle = true;
}

function buildSupport(){

styleStr = "<Style> .placeHolder {Position:Absolute;Top:-2000}</Style>";
divStr = "<Div class=placeHolder><IMG Src=Null ID=nullIMG></Div>"
document.write(styleStr);
document.write(divStr);
}

buildSupport();

window.onunload=function(){

if (winToggle && !largerView.closed){largerView.close()}
}
</Script>

</Head>

<Body>

<center>

<H3>Automatic centering and sizing of popup window</h3>

<Img Src='Any.jpg' width=200 height=200 onclick="openFullSize(this.src)">

</center>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@frg202ndauthorFeb 25.2005 — Thanks Warren!

So far so good; I was able to set it up.

I assume that the original picture, if it is 300x400pixls can be proportionally resized at first (for the html page) and then shows up at 300x400 in the pop up, right? The Pop-up automatically adjusts to the pictures size?

One thing though; When the pop-up appears, I get an error message on the page. Do you know how to fix this?

(Obviousely the same pics are just for testing...)

Thanks

S



<HTML>

<Head>

<Script Language=JavaScript>

var largerView = "";

var winToggle = false;

function openFullSize(Pix){

if (winToggle == true){largerView.close()}

document.getElementById('nullIMG').src = Pix;

wStr = document.getElementById('nullIMG').width;

offsetW = wStr;

wStr = wStr+20;

wStr = "width="+wStr;

hStr = document.getElementById('nullIMG').height;

offsetH = hStr;

hStr = hStr+20;

hStr = "height="+hStr;

lStr = (screen.width-50-offsetW)/2;

lStr = "left="+lStr;

tStr = (screen.availHeight-50-offsetH)/2;

tStr = "top="+tStr;

largerView = window.open(Pix,"FullSize","toolbar=0,status=0, "+tStr+","+lStr+","+wStr+","+hStr+" ");

largerView.document.images[0].alt = "This is a description";

winToggle = true;

}

function buildSupport(){

styleStr = "<Style> .placeHolder {Position:Absolute;Top:-2000}</Style>";

divStr = "<Div class=placeHolder><IMG Src=Null ID=nullIMG></Div>"

document.write(styleStr);

document.write(divStr);

}

buildSupport();

window.onunload=function(){

if (winToggle && !largerView.closed){largerView.close()}

}

</Script>

</Head>

<Body>

<center>

<H3>Automatic centering and sizing of popup window</h3>

<Img Src='http://www.blabla.com/yadayada/pictures/002_02.jpg' width=100 height=100 onclick="openFullSize(this.src)"></a>

</center>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@Warren86Feb 25.2005 — frg202nd:

It's an "Access Denied" error. I have provided this code to many others, usually without incident. Sometimes, it requires the images to be preloaded for the "first" click to work. And sometimes not.

But I don't know about your situation. Are you on a secure military server? That's my only thought.

Sorry, but if "Access is Denied" there's nothing I can do to help you.
Copy linkTweet thisAlerts:
@frg202ndauthorFeb 25.2005 — hmmm

Not on a military server....

I did upload the pictures into my files on the site I have. Would there be a problem with the server of host-company of my site you think?

Could it be because I have a password protected site?

So if the server 'allows' this script; Everything looks good, and the pop-up window could be resized by dragging the edge?

S
Copy linkTweet thisAlerts:
@Warren86Feb 25.2005 — No. No. Sorry, the code automatically displays the full size image of the photo, in a new, clean and centered window.

You state the dimensions of the thumbnail, in the HTML, but use the full size image as the IMG src. When the thumbnail is clicked it opens a new window, the exact size of the photo, whatever that might be.

Did you try the code "locally?", meaning did you try it offline?

Just right there on your computer, without using http// for the src of the images, just path and file names.

For example, the "main page" is in a folder named Test. Inside that folder are the images you want to use.

So, in the HTML you would specify just the file name for the photo. Clicking it will open the fullsize image.

The orginal code is a perfect example, using Any.jpg, which is located in the same folder as the main document.
Copy linkTweet thisAlerts:
@frg202ndauthorFeb 25.2005 — yup, I haven't loaded the page on the web yet.. I test them beforehand...

Well maybe I just need to try another source code.

With this one below, I figured out where to put my site, but the body tag (step two) is a mistery to me.

(Without the picture it seems to pop up without errors so far)
_____________________________________________________________________
at step one: with my remarks, unchanged below
_____________________________________________________________________
<!-- Begin

var windowW=214 // wide I know what this is

var windowH=398 // high I know what this is

var windowX = 260 // from left Not quite sure

var windowY = 100 // from top Not quite sure

var urlPop = " ...................................my page here .html"

var title = "This Is A Frameless Popup Window"

// set this to true if the popup should close

// upon leaving the launching page; else, false

var autoclose = true
_____________________________________________________________________


If you could help me by telling me where and how to add the pictures I promise to get out of your hair (for today? )

If you could 'edit' it into this code, that would be awesome!

Thanks

S


<!-- THREE STEPS TO INSTALL FRAMELESS POPUP:

  • 1. Copy the coding into the HEAD of your HTML document

  • 2. Add the onLoad event handler into the BODY tag of your Popup HTML document

  • 3. Put the last coding into the BODY of your HTML document -->


    • <!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Original: CodeLifter.com ([email protected]) -->

    <!-- Web Site: http://www.codelifter.com -->

    <!-- This script and many more are available free online at -->

    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin

    var windowW=214 // wide

    var windowH=398 // high

    var windowX = 260 // from left

    var windowY = 100 // from top

    var urlPop = " ...................................my page here .html"

    var title = "This Is A Frameless Popup Window"

    // set this to true if the popup should close

    // upon leaving the launching page; else, false

    var autoclose = true

    // do not edit below this line

    s = "width="+windowW+",height="+windowH;

    var beIE = document.all?true:false

    function openFrameless() {

    if (beIE) {

    NFW = window.open("","popFrameless","fullscreen,"+s);

    NFW.blur();

    window.focus();

    NFW.resizeTo(windowW,windowH);

    NFW.moveTo(windowX,windowY);

    var frameString=""+

    "<html>"+

    "<head>"+

    "<title>"+title+"</title>"+

    "</head>"+

    "<frameset rows='*,0' framespacing=0 border=0 frameborder=0>"+

    "<frame name='top' src='"+urlPop+"' scrolling=auto>"+

    "<frame name='bottom' src='about:blank' scrolling='no'>"+

    "</frameset>"+

    "</html>";

    NFW.document.open();

    NFW.document.write(frameString);

    NFW.document.close();

    }

    else {

    NFW = window.open(urlPop,"popFrameless","scrollbars,"+s);

    NFW.blur();

    window.focus();

    NFW.resizeTo(windowW,windowH);

    NFW.moveTo(windowX,windowY);

    }

    NFW.focus();

    if (autoclose) {

    window.onunload = function(){NFW.close();}

    }

    }

    // End -->

    </script>

    </HEAD>

    <!-- STEP TWO: Insert the onLoad event handler into your BODY tag of your Popup HTML document -->

    <BODY onLoad="top.window.focus()">

    <!-- STEP THREE: Copy this code into the BODY of your HTML document -->

    <a href="javascript:openFrameless()">Click Here</a>

    <p><center>

    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

    </center><p>

    <!-- Script Size: 2.24 KB -->
    Copy linkTweet thisAlerts:
    @Warren86Feb 25.2005 — Honestly, I can't help you further. I won't look at someone else's code and try to make it work for you. They gave you instructions to follow.


    The code I originally posted works. Many people have used it without error.


    If it doesn't work locally for you, I can't explain it. It works locally for me, and many others.

    Good luck to you. I'm unsubscribing from this thread. I can't help you.
    Copy linkTweet thisAlerts:
    @Warren86Feb 25.2005 — .
    Copy linkTweet thisAlerts:
    @frg202ndauthorFeb 25.2005 — Thanks for all your help!

    I will figure it out from here ?
    Copy linkTweet thisAlerts:
    @frg202ndauthorFeb 25.2005 — uuu, sorry about that... i was fighting my cat to get off the keyboard!

    Would not ever try to change a working code!!!!!!!
    ×

    Success!

    Help @frg202nd spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.1,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...