popup with CSS

popup CSS

[asoza]

i am making a gallery page for my website as an online resume. i made them clickable so that they will appears in its full size in a new broswer window (IE6.0) however, i also wanted to apply CSS to the popup window so that it fits into my website theme. however, i am unable to do so :(
where should i put the CSS code in my gallery.html? since the popup window are generated by the javascript.
for example.
clicking on disc.jpg will show the disc.jpg in a new browser window with its original size. and not a disc.html

i can make a disc.html and apply all the CSS to it, but i have more than 50 images, just wondering if there's an easier way to accomplish it.

asoza

[Nick_W]

Hi Asoza, welcome to WebmasterWorld ;)

I have no idea I'm afraid, but in case you've not seen it look at the last few msg's in This thread [webmasterworld.com]

Possibly you could adapt it to do something similar on you pages? Good luck!

Nick

[tedster]

clicking on disc.jpg will show the disc.jpg in a new browser window with its original size. and not a disc.html

You need to have your pop-up window load an HTML document that contains the disc.jpg, instead of just loading the jpg on its own. Then you can apply CSS to that HTML document.

[dhdweb]

Useing PHP all you need is a single picture viewing page that gets vars from a query string to know what pic to display.

Then you make the gallery links look something like this:

<a href="pic_show.php?pic=1">
<a href="pic_show.php?pic=2">
<a href="pic_show.php?pic=3">

And on pic_show.php you would have:

<img src="<? echo $pic ?>.jpg">

You can format pic_show.php any way you want!

[asoza]

thank you for the welcome. :)
the php would work nicely. i will set one up right now.

however, do you know any good tutorials that will offer the basic about php? i know what php is and how it works. but i have never actually wrote one myself. but thank you for the help. at least i know it is possible :)

asoza

[Nick_W]

Undoutably the best source is he PHP maual at php.net

Don't be put off by the term 'manual' it's one of the most user friendly and easy resources on the net.

Nick

[dhdweb]

asoza,

What you want to do is really strait forward, your gallery page does not need to be PHP, only the picture viewing page.

So, as long as your pic links contain the query like above post and your picture viewing page has the extension of .php and contains this code:

<img src="<? echo $pic ?>.jpg">

you are all set.

You can also set the alt dynamicaly by doing the following

<img src="<? echo $pic ?>.jpg" alt="<? echo $alt ?>">

The query would look like this:

<a href="pic_show.php?pic=1&alt=1">
<a href="pic_show.php?pic=2&alt=2">
<a href="pic_show.php?pic=3&alt=3">

dhdweb

[Slade]

Some places prefer that the code start <?php rather than just <?

No change to the end code... The line posted above, plus the basic html open/close tags and the link to the stylesheet should be about all that you need.

[asoza]

thank you for the replay. i am relatively stupid. could you give me an example? let say an image name called disc.jpg
where should i put it in the php tag?
<a href="pic_show.php?pic=3"> or
<a href="pic_show.php?pic=disc.jpg">?
thank you for all the help once again :)

asoza

[dingman]

With the example dhdweb gave, you would need to use
<a href="pic_show.php?pic=disc">

if the image is 'disc.jpg'. The numbers probably stem from the fact that it is not uncommon to use a directory full of images with names like '1.jpg', '2.jpg', '3.jpg' and so on. How you name your files is up to you. Do something that makes sense to you.

<added> In addition to the assumption about short tags that has already been mentioned, dhdweb's code assumes that PHPs 'register globals' option is on. This isn't guaranteed, either, but it's easy to deal with if 'register_globals' is off. just add

<?php $pic = $_GET['pic'];?>
or
<?php $pic = $HTTP_GET_VARS['pic']'?>

somewhere earlier in the file than the line dhdweb gave you. The first line is best if it works, because in newer versions of PHP the second line is deprecated, and in future versions it may cease to work at all. On the other hand, older versions of PHP don't support the first line I provided.
</added>

[dhdweb]

Just a side note:

My code also assumes that all the picture files are .jpg

dhdweb

[asoza]

you guys are the best! :) it works like a charm now. i will edit the CSS and make it looks nice then i will post up the link for you to check it out. where should i put the credits? :)

asoza

[dingman]

I'm sure we all appreciate the sentiment, but you should probably skip the link. It's a violation of the TOS, so it'll just get snipped out anyway.

[dhdweb]

You're welcome :)

<edit reason>can't type</edit>