PDA

View Full Version : Popup's and Slideshows and Links...OH MY!


E-Unit
12-07-2005, 02:20 AM
I'm Finding my 100% lack of knowledge on the topic of HTML or Java to be continuously crippling...

I'm trying to make a popup window, and inside of that a slideshow for pictures. I've found a tutorial for a popup window, and a tutorial for a slideshow for pictures.

Problem is...I can't read code <_< or even make any sense of it enough to plug it in.

I'm growing dependent on Dreamweaver, and find myself without the time to learn HTML. Could I pester any of you for some scripting help so I can put some schnazzy pop-ups to my site?

Thanks!

bolloscript
12-07-2005, 07:36 AM
Try this place http://www.htmlgoodies.com/primers/html/ ('http://www.htmlgoodies.com/primers/html/') if you want to get a basic understanding of how html is written.
I followed this on monday having known absolutely nothing about how handcoding works.
I wrote my first page after about an hour
There are no links to the next chapter at the end of the page which is a bit annoying, so you have to click the back button & then choose the next chapter. But believe me its well worth it. :)
Im sorry thats not really solving your popup issue, I'm a beginner myself, just thought this would be useful.

chriskq
12-07-2005, 08:05 AM
well, making a pop up window in dreamweaver is easy.
Once you have made the pop up window (to be) its as simple as selecting the link, go to properties box, and make open page in = 'new window'

now for a nice photo slide shower-er Viewer-er-er.

here is a really simple java script for scrolling through photos.
<script language="javascript">
function getaimage()
{

var rnumb = '200';

var img=new Array(5)

img[0]='<img src="images/01.jpg" width="200" height="282" />';

img[1]='<img src="images/02.jpg" width="200" height="282" />';

img[2]='<img src="images/03.jpg" width="200" height="282" />';

img[3]='<img src="images/04.jpg" width="200" height="282" />';

img[4]='<img src="images/05.jpg" width="200" height="282" />';

rnumb += Math.floor(Math.random()*5);
document.getElementById('images').innerHTML = img[rnumb];
}

</script>
</head>
<body onload="getaimage()">
<div id="images"></div>
</body>
</html>

just slap it in above the body, make sure your images are in correct folder, and make sure they are all the same dimensions- otherwise when they flick between one-another, it may look a little scrappy if there not all same size.

Keep in mind this is a easy fix solution. Developing a image viewer in flash would be better, and less downloading. but get your head around html and java scripting before you tackle flash tutorials.

ps - if you are good with imagery, you can even make them 'fade in' and 'fade out', just add more image variables (ie- var img= (should equal number of pics using) and then order them in such a way eg:
0 faded_image_50%
1 faded_image_75%
2 REAL_image etc etc etc

hope this helps

domedia
12-07-2005, 01:04 PM
Problem is...I can't read code or even make any sense of it enough to plug it in.
ok, you got 2 ways to go here if you want to create webpages :)
1. Learn html/css/javascript
2. Find someone else that does and start managing projects instead of growing grey hairs from them ;)

davidj
12-07-2005, 01:43 PM
regarding chriskq post

that wont work as you are setting rnumb ='200' and doing a math.random on it

it will only work if your img array is set to img[2000] , img[2001], img[2002] etc

or you could just set rnumb =''

E-Unit
12-07-2005, 09:27 PM
well, making a pop up window in dreamweaver is easy.
Once you have made the pop up window (to be) its as simple as selecting the link, go to properties box, and make open page in = 'new window'


That does sound easy enough (Granted I haven't had the time to try it yet). I do have one question though: how do I set there to be a maximum new window size, rather than having 2 huge scroll bars.

Similar to any of the photo-albums here: http://www.justinsecor.com/photos.html ('http://www.justinsecor.com/photos.html')

To be most specific, thats exactly what I'm looking to learn how to do. :o

ok, you got 2 ways to go here if you want to create webpages
1. Learn html/css/javascript
2. Find someone else that does and start managing projects instead of growing grey hairs from them

hehe...probably the best advice I could get, right? :P To clarify, there is a background to my not knowing any HTML and still taking on a full web project. Initially, I was going to have the #2 mentioned above, and I would just be the graphic's guru (Graphics being my "thing"). Then Mr. #2 bailed, and left me with a bunch of pretty pictures, and a copy of Dreamweaver in his wake.

But, I'll learn it soon enough. Once I can find the time; its becoming higher and higher on my priority list. For now I need to struggle through this year's work, and come summer time bunker down with HTML How To's and all those great books for dummies.

Thanks all for the help! I'll take a swing at all of the stuff here (Including the HTMLgoodies How-To; Thanks Bolloscript!) Also...if you're interested in seeing the site: Student Axis ('http://www.studentaxis.com') and the most recent "Under Development" Student Axis Construction Zone ('http://www.studentaxis.com/Winter%20Retreat%20Promo%20Page/retreat.htm')

Creative Insanity
12-08-2005, 01:23 AM
Ok here we go.

Detailed instructions.

1. Select on the menu, window -> Behaviours.
2. In the behaviours panel click the + and select events for and set to IE6
3. Select your image and then click the + again and select open browser window.
4. Fill out the diolog window that appears and walla done.
You can change the type of action by clicking the the first drop down for the event.

Good luck!

Creative Insanity
12-08-2005, 07:44 AM
I just noticed on your winter site you have a huge no no when it comes to web design.
You are using spaces. (aaagghhh!!)

/Winter Retreat Promo Page/Popup-Original.htm

you are better to format it thus:

/Winter_Retreat_Promo_Page/Popup_Original.htm

E-Unit
12-08-2005, 08:01 PM
I realized that when it was too late! I had my "oops!" moment, and then dreamweaver complained when I tried to re-name it to no spaces.

something about "That name is already a name of another folder" but...no such folder name exists. Craziness.

I'll try again, with all other docs and programs closed

Creative Insanity
12-08-2005, 11:33 PM
yeah just close dw and rename it and then run dw again and you should be sweet.

E-Unit
12-09-2005, 12:20 AM
Alrighty: I managed the pop-up window succesfully (Thanks all for your help!!!)

What I'm hung up on now is the slideshow. The tutorial I was suggested to by a friend was http://www.htmlgoodies.com/beyond/javascri...cle.php/3471341 ('http://www.htmlgoodies.com/beyond/javascript/article.php/3471341')

Where I'm stuck is getting the images to slide between one another. The links show up, but when they are clicked the message "Error on page" shows up in the bottom left corner of the screen.

Here's my code as I've copied it (I am aware the name of the folder isn't changed..Dreamweaver is being fussy):
<body>
<img src="Winter%20Retreat%20Promo%20Page/Images/Retreat2005-001.jpg" name="mypic" border=0 height="384" width="512">
<FORM NAME="joe">
<INPUT TYPE="text" WIDTH="100"
NAME="burns" VALUE="Text For Picture One">
</FORM>

<A HREF="JavaScript:slideshowBack()"> Back</A>

<A HREF="JavaScript:slideshowUp()"> Next</A>

</body>
</html>
<script LANGUAGE="JavaScript">
var num=1
img1 = new Image ()
img1.src = "Winter%20Retreat%20Promo%20Page/Images/Retreat2005-001.jpg"
img2 = new Image ()
img2.src = "Winter%20Retreat%20Promo%20Page/Images/Retreat2005-002.jpg"
img3 = new Image ()
img3.src = "Winter%20Retreat%20Promo%20Page/Images/Retreat2005-003.jpg"
img4 = new Image ()
img4.src = "Winter%20Retreat%20Promo%20Page/Images/Retreat2005-004.jpg"
img5 = new Image ()
img5.src = "Winter%20Retreat%20Promo%20Page/Images/Retreat2005-005.jpg"
img6 = new Image ()
img6.src = "Winter%20Retreat%20Promo%20Page/Images/Retreat2005-006.jpg"

text1 = "Text for Picture One"
text2 = "Text for Picture Two"
text3 = "Text for Picture Three"
text4 = "Text for Picture Four"
text5 = "Text for Picture Five"
text6 = "Text for Picture SiX"

function slideshowUp()
{
num=num+1
if (num==7)
{num=1}
document.mypic.src=eval("img"+num+".src")
document.joe.burns.value=eval("text"+num)
}

In Dreamweaver, "var num=1" shows up with the "1" being red. I'm assuming that means the code doesn't work, and that's what the problem is. My problem is getting around that. Anything that relates to "Num" has the numbers associated with it in red.

Any ideas?
(Thanks in advance)

Creative Insanity
12-09-2005, 05:41 AM
You have your javascript in the wrong place. It should be in the head.

I tested this script from the site you linked and here is the code from the working page.

<html>
<head><title>slide show</title>
<script LANGUAGE="JavaScript">

var num=1
img1 = new Image ()
img1.src = "images/1.gif"
img2 = new Image ()
img2.src = "images/2.gif"
img3 = new Image ()
img3.src = "images/3.gif"
img4 = new Image ()
img4.src = "images/4.gif"

text1 = "Text for Picture One"
text2 = "Text for Picture Two"
text3 = "Text for Picture Three"
text4 = "Text for Picture Four"

function slideshowUp()
{
num=num+1
if (num==5)
{num=1}
document.mypic.src=eval("img"+num+".src")
document.joe.burns.value=eval("text"+num)
}

function slideshowBack()
{
num=num-1
if (num==0)
{num=4}
document.mypic.src=eval("img"+num+".src")
document.joe.burns.value=eval("text"+num)
}

</SCRIPT>
</head>
<body>
<CENTER>
<IMG SRC="images/1.gif" NAME="mypic" BORDER=0 HEIGHT="100" WIDTH="100">
<p>

<FORM NAME="joe">
<INPUT TYPE="text" WIDTH="100" NAME="burns" VALUE="Text For Picture One">
</FORM>

<A HREF="JavaScript:slideshowBack()"> Back</A>

<A HREF="JavaScript:slideshowUp()"> Next</A>
</body></html>

E-Unit
12-09-2005, 04:27 PM
Great News!!

The Pop up works...and now the slideshow!! I have a few quirks, but they are minor in my book, so if they get answered or not is no biggy.

When I linked to the pop-up, the link loads the pop-up, but it also jumps from the page containing the link, and that page becomes the link itself, with the pop-up as well. I'd like the page to stay what it was originally when I make the pop-up.

The text-boxes aren't expanding, I put in the pixel-width to what I want. And it shows up in the "Design" portion of Dreamweaver, but on "test in broswer" it fails to recognize the new size.

Thanks again so much!!

EDIT: the end result can be found here: http://www.studentaxis.com/retreat.htm ('http://www.studentaxis.com/retreat.htm'). Click the "...years Past" link to get the slideshow. Thankyou all for you help!!