Closed Thread Icon

Topic awaiting preservation: Pictures, Pop-ups and learning. (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=7945" title="Pages that link to Topic awaiting preservation: Pictures, Pop-ups and learning. (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Pictures, Pop-ups and learning. <span class="small">(Page 1 of 1)</span>\
 
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-26-2001 15:53

I know I know. I hate pop-ups too, but I think this will work better than having them go to a complete diffrent page. Want I want to do is have them click on a thumbnail of a picture and have a pop-up the exact size of the orginal picture come up. I know a site that does this and I can view the view source, but I'd really like to learn what makes this work and besides..who want to cut out all that useless code. Take a look here to see what I mean. I think those pop-ups use a offline JS.
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-26-2001 15:56

Wait...........is this that javascript?

code:
<script language="JavaScript">

<!--

function openNewWin()

{

window.open("http://www.winduplist.com/ls/signups/enews/drowning_pool_enews.asp ","DP_Enews","toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=yes,width=300,height=425");

}



function MM_openBrWindow(theURL,winName,features) { //v2.0

  window.open(theURL,winName,features);

}

//-->

</script>


.......and then this is the command that brings it up?

code:
<a href="#studio" onClick="MM_openBrWindow('studio2-01/dave2.jpg','','width=487,height=380')"><img src="studio2-01/tn_dave2.jpg" width="100" height="100" hspace="5" border="0"></a>





[This message has been edited by Dark (edited 12-06-2001).]
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-26-2001 16:20

Nope that didn't work. Maybe I just don't understand calling a new window.

code:
<a href="Thepage.htm" target="anotherWindowName">Open new window</a>


Right?

And in this case it is

code:
<a href="#" onClick="MM_openBrWindow('studio2-01/dave2.jpg','','width=487,height=380')">






[This message has been edited by Dark (edited 12-06-2001).]
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 11-26-2001 16:27

Are you talking to yourself again Dark

I am using something like this myself on my redesigned site. As soon as I get home I will post the script that I used. Here is what I have:

I have a page with pics of all my pets on it ( 1 per pet). When you click on the thumbnail it will open a little window that acts as a flip book for more pics of that pet. Is this something like you want?



C:\
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-26-2001 16:39

Yes an no. Go here and look at the pop-ups on the pictures. It looks simple enough... and though a flip book would be cool for later use. That's not what I am looking for right now

[This message has been edited by Dark (edited 11-26-2001).]
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 11-26-2001 17:09

Dark: If I understand your question correctly then this is pretty standard fare (and is a reasonable use of pop ups although I can think of more interesting ways to do such a thing - I'd have a central picture which you could swap to the desired full size version from the thumbnails, for example). Have a look at this:
www.gurusnetwork.com/tutorials/html/windowpop_generator.html

Emps


You're my wife now Dave
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-26-2001 17:24

Hey now this is pretty neat and exactly what I was looking for
all i had to do was swap the URL of the site for the full URL of my pics.



[This message has been edited by Dark (edited 11-26-2001).]
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 11-26-2001 17:38

Yeah that is something like what I used, but I made some variables for URL's so I didn't have to rewrite the code depending on which pic was clicked.

quote:
But does it look the same?
Also does it matter what the name of the window is?



Not sure what you mean by this. You can change the name of the function and the variable in front of the window.open() All this does is say when you click on the picture, it opens a new window with what ever URL you give it in the window.open() section.

You will have to do one of two things though. You will have to make sure that all the pictures are the same size since you define the size in the script or make variables for each one and then call them from the link section. Does that make sense?? Not sure if I am explaining that right.




C:\
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-26-2001 17:42

I understand perfectly

Thanks CPrompt + Emperor
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-27-2001 04:21

Ok now that works I wanna try some other things......

Now I am trying to get the pop-ups to sorta...um..."slide" in.
Emp is there an easy way to do this without changing to much of the
script? Otherwise I can pulll this.... , but I really like your script

<BLOCKQUOTE><FONT face="Verdana, Arial">code:</font><HR><pre>
<html><head>
<script language="JavaScript1.2">

var ie=document.all
var dom=document.getElementById
var ns4=document.layers

var bouncelimit=32
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
crossobj.top=scroll_top-250
crossobj.visibility=(dom
Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

 posted posted 11-28-2001 09:22

Dark,

I wrote a popup script for just the sort of thing you mention in your original post. Take a look at this page and see if you can't get some ideas from it. A cool feature is that the new window resizes itself to the image it contains. http://bugimus.com/gurus/image_popup/imagepopup.html

I use this script for pages that have a lot of miscellaneous images that I want to have thumbnails for. I use it on my bio pages and on my BugLOG.
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-28-2001 17:43

Hey that's neat also! haha I really like the "resize" function, because on emps script I had to resize all the pictures to whatever I wrote in the script, but is there a simple way to make the picture "slide" in on either of these scripts? Thanks Bug + Emp
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 11-28-2001 18:11

Dark: I should say that the pop up script generator is the work of Pugzly (there are a number out there but it is the best one I've seen). It depends on how you are going to implement the code - if its on a page like Bugs has then that solution is good if its purely for a page of thumbnails then there are probably more interesting solutions. The window resize idea is interesting and throwing in a bit of PHP to get the image size being loaded would trim down the code and make things a little more flexible. I still like the idea of swapping a main image on the clicking of a thumbnail (search the archives - I threw a brief example of code).

I'll have a look around for something that brings the window in although I would caution against doing something like that as:

1. I think you could come up with something a little more innovative that wouldn't require pop ups.

2. If there are a lot of pictures I know I'd get pretty tired of the new window scrolling in!!

For inspiration see things like this:
http://javascript.internet.com/page-details/move-window.html
http://javascript.internet.com/page-details/move-window-2.html
http://builder.cnet.com/webbuilding/pages/Programming/JSWinTips/ss18.html

it seems the critical bit you'd need is window.moveBy(x,y) - it should be pretty simple to open the pop up image as a HTML document and then have an onLoad function move it in from wherever you want.

Emps


You're my wife now Dave
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-28-2001 18:33

I should have explained that I want both
I have a page with just thumbnails that I want to use pop-ups with and I will either use bugs or Pugzly's script for that and I also want to bring in a pop-up for some text content that "slides" in. haha I wouldn't want my thumbnails sliding in! My God I'd kill myself! hahah! but, this is the script that I am going to use for the slide in....

<BLOCKQUOTE><FONT face="Verdana, Arial">code:</font><HR><pre>
<html><head>
<script language="JavaScript1.2">

var ie=document.all
var dom=document.getElementById
var ns4=document.layers

var bouncelimit=32
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
crossobj.top=scroll_top-100
crossobj.visibility=(dom
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 11-28-2001 18:44

Dark: We may be talking at cross purposes - hopefully the email I sent explained things a little better but I'll run through it again.

What I'm assuming you want is a page of thumbnails which pop up a new window with the full size image in which slides in - no?

This is still back of the envelope stuff/thinking out loud but I would use Pugzly's script to generate the pop up window script for the page with the thumbnails and I would load the image into a HTML page in the pop up with the moving function called from <body onload=""> - I'd just loop through changing, e.g., the x value of window.moveBy until it arrived at a preset position. The script should be relatively simple depending on your plans. One of the DHTML gurus here may spot a flaw in the plan or know a better solution but that is my first go at the solution. I hope thats clear - let me know if its not and I'll try again.

[Emp edit: It doesn't matter if you want text ot images in the pop up it all works the same. However, if the text isn't going to change then you possible don't need a new window but some kind of sliding DIV which is a different beast. I also wouldn't use that script unless you wanted to annoy the users of your page!!]

Emps


You're my wife now Dave

[This message has been edited by Emperor (edited 11-28-2001).]
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-28-2001 19:13

haha ... no ....

I have one page that is full of thumbs that wehn clicked on will sumbit a pop-up using pug or bugs script.

I have a second page that I need a pop-up window that slides in with text

I have it figured out now. Thanks CPrompt + Emps + Bugs + Pugzly

Buh-bye thread


[This message has been edited by Dark (edited 11-28-2001).]
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 11-28-2001 19:17

Dark: OK as long as its all fixed now although a clearer explanation would have moved things along a little quicker.

Emps
Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

 posted posted 11-28-2001 22:12

If you insist on having the picture or text "slide" in which could get real annoying real fast, then how about just changing the clipping and "reveal" it instead? I think that would be slightly less obnoxious and would actually give it a slideshow feel.
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-28-2001 23:29

Good point! I'll give it a shot. I put the orginal slide-in to appear once every browser session so it wouldn't be that annoying. It comes into place and looks like part of the page So It doesn't really look like a pop-up and so I took off the "dismiss" option out of the JS. I'm still wondering if there is way to add a border around the square. It would have to be added into the style..........

<div id="dropin" style="position:absolute;visibility:hidden;left:130;top:150;width:505;height:100;background-color:#003366">
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 11-28-2001 23:31

Dark: If you just want a simple border then: border: 1px solid #000000; if you want a graphical one it is possible but requires more fiddling.

Emps


You're my wife now Dave
Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

 posted posted 11-29-2001 01:38

Dark, I would be cool to see the page you're working on. Got a link?
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 11-29-2001 03:35

check your e-mail bugs

« Backwards — Onwards »

Show Forum Drop Down Menu