Gallery

torrey

New Member
Messages
9
Reaction score
0
Points
0
Hey Everyone! I am attempting to build a phot gallery to display my work on some of the pages. I am currently using iframes but the pictures seem awkward in the current setup. Does anyone have a better layout idea than iframes or an idea for how to modify so it looks better.

tselfphotography.exofire.net
 

Hazirak

New Member
Messages
197
Reaction score
0
Points
0
It honestly looks pretty good to me, but if you really want to go for another method, you can swap your iframes for divs (if I remember correctly, div has a style option to handle overflows by adding a scroll bar), and use JavaScript to edit the img tag's src attribute whenever you click a preview image. To do that, you would use a block of code something like this either embedded in the page or as an external document:
Code:
function showImage(image) {
document.getElemenyById(imageID).src=image;
}
... and then add this to your preview image tags:
Code:
onclick="showImage('URL')"
... and add this to the full-size image tag:
Code:
id="imageID"
... and that should do it. Just replace "URL" with the image's location (keep the single quotes around the URL though), and get rid of your <a> tags... though, if you still want the user's mouse pointer to change to the pointing finger, you can just swap your current <a> tags for <a href="#">.
 
Last edited:

ThePaintGuru

New Member
Messages
208
Reaction score
0
Points
0
I would use that lightbox suggestion... iframes are still sometimes rendered strangely, and shouldn't be used unless you have a very good reason.
 

Sohail

Active Member
Messages
3,055
Reaction score
0
Points
36
Why don't you create a completely different template/layout.
 

torrey

New Member
Messages
9
Reaction score
0
Points
0
anks everyone. I have a series of new pictures coming in adn I aplan on trying some of your suggestions for my new wedding albums page.
 

VPmase

New Member
Messages
914
Reaction score
0
Points
0
It honestly looks pretty good to me, but if you really want to go for another method, you can swap your iframes for divs (if I remember correctly, div has a style option to handle overflows by adding a scroll bar), and use JavaScript to edit the img tag's src attribute whenever you click a preview image. To do that, you would use a block of code something like this either embedded in the page or as an external document:
Code:
function showImage(image) {
document.getElemenyById(imageID).src=image;
}
... and then add this to your preview image tags:
Code:
onclick="showImage('URL')"
... and add this to the full-size image tag:
Code:
id="imageID"
... and that should do it. Just replace "URL" with the image's location (keep the single quotes around the URL though), and get rid of your <a> tags... though, if you still want the user's mouse pointer to change to the pointing finger, you can just swap your current <a> tags for <a href="#">.
document.getElemenyById(imageID).src=image;
should be
document.getElemenyById('imageID').src=image;
}
 
Top