1click,2effects/Frame photo-album

Posted on 2004-08-15
Last Modified: 2007-12-19
Hi, I'm tryin' to create a simple picture album in frames A,B & C.
A frame= menu, contains thumbnails;
B frame= main pic display window when clicks made in 'A' frame;
C frame= should display picture description.
In short, 1 click on thumbnail, displays picture in 'B' and it's description in 'C'.

I could get A & B, but not C.
Any tips will be awesome! Thanks!

Question by:tenzinmin
  • 5
  • 3

Expert Comment

ID: 11804561
Hiya tenzimin,
It would be nice to see your current code, then at leaqst we know what needs to be done.

On another note: Are you really sure you want to use frames for this? It's an archaic html technology that is replaced by server side technologies for the most part years ago.


Author Comment

ID: 11804654
Hi Klykken,
Following code is placed in iframeA.

<a href="picture1.jpg" target="iframeB" >
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

When the 'pic1thumbnail'  is clicked, the real picture displays in iframeB. What I need is a special 'tag' or 'code', something that could generate the picture description in 'iframeC' w/ that one same click.

I know following codes wouldnt work..just an idea..

<a href="picture1.jpg" target="iframeB" a href="description.html" target="iframeC'>
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

Af forme, frames looks lil' easier then javas..  :) Thanks!

Expert Comment

ID: 11804703
Just add a little javascript to your link like this:
<a href="picture1.jpg" target="iframeB" onClick="parent.iframeC.location='description.html'">
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.


Expert Comment

ID: 11804817
Hiya COBOLdinosaur!
Coming from you, that greeting actually means something :-) I've been away for a while, but I guess I'm back now.

Author Comment

ID: 11804893
That was helpful..u rock!..hehe..okay..I'll increase the points by 50 more and ask one related question:
I dont wanna make 50 different description pages for my 50 pix, I'd rather make one page and have all description interconnected. Eg:
Where they use this sign '#' to link the description. But I dont want user to click many times. So user should click a thumbnail, & gets the real picture1 + exact #description1. Can you help me on this? Thanks!

Accepted Solution

klykken earned 150 total points
ID: 11804942
hi tenzomin,
This is actually a great example of why you should'nt use frames :-) This gets overcomplicated. Html pages should be *one* page (in my world anyways). But enough of my rant, let's see if we can hack our way through this soyou can make your frames to work :-)

First of all you need to insert an anchor inside your description.html right before each description starts, like this:
<a name="desc1"></a>
Description 1 etc etc
<a name="desc2"></a>
Description 2 etc etc
<a name="desc3"></a>
Description 3 etc etc

Now you need to change your thumbnail links to this, so that each link will link to the correct anchor in your (now) looong description page:

<a href="picture1.jpg" target="iframeB" onClick="parent.iframeC.location='description#desc1.html'">
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

<a href="picture2.jpg" target="iframeB" onClick="parent.iframeC.location='description#desc2.html'">
<img border="1" src="pic2thumnail.jpg" width="100" height="67"></a>

<a href="picture3.jpg" target="iframeB" onClick="parent.iframeC.location='description#desc3.html'">
<img border="1" src="pic3thumnail.jpg" width="100" height="67"></a>


You get the point :-)



Author Comment

ID: 11805136
Hey Klykken! I dunno wut 2're jst GrRrrEaATT!! haha.. it worked!! Only thing I had to fix is..


..into...(moved .htm in front....)


Thank you so much! hope to c ya again! haha!! TekKare!

Expert Comment

ID: 11805160
oops my mistake..
Good job figuring out what to change in my code though :-)
Good Luck with your photoalbum!


Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question