Member Avatar for stockton

I have a web page at http://www.stockton.co.za/prince.shtml which I am unhappy with and would like to alter.
I don't like it for the following reasons:-
1) All images are loaded at inception making it quite slow.
2) It is definitely not user friendly.
What I thought of doing was to load a page of thumbnails initially and as and when any thumbnail is clicked use Ajax to retrieve the bigger image.
Now this is all well and good and quite easy to do but in addition I want the original thumbnails page to remain in place in the background and have the "bigger image" in the foreground. When the "bigger image" is in turn clicked it should disappear leaving the background "thumbnails" page ready for user interaction.

Comments please, especially on how to do this overlay thing.

I know that using other peoples software such as, Joomla / Wordpress / Drupal / RVSiteBuilder, is the easy way to go about it but it teaches me very little, other than how other peoples code works.

When I code the solution myself I have at least added a bit to my programming skills and I find programming fun and my web site is not a commercial venture but an exercise in finding out how things are done.

  • 4 Contributors
  • 6 Replies
  • 189 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for almostbob

loading the image onclick may not be as fast as you need for hi res images, but will speed page load because most people do not click images, so only the thumbs will be required

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false; //select ie mozilla
function hideIt() {
 if (dom) {document.getElementById("layer1").style.visibility='hidden';} //ie
 if (document.layers) {document.layers["layer1"].visibility='hide';} } //mozilla
function showIt(image) {
 if (dom) {document.getElementById("layer1").style.visibility='visible';document.getElementByID('bigimage').src=image;}
 if (document.layers) {document.layers["layer1"].visibility='show';document.getElementByID('bigimage').src=image;} }
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<img src='thumb1.jpg' onClick="showIt('/largeimage1.jpg');">
<img src='thumb2.jpg' onClick="showIt('/largeimage2.jpg');">
<img src='thumb3.jpg' onClick="showIt('/largeimage3.jpg');">
<img src='thumb4.jpg' onClick="showIt('/largeimage4.jpg');">
<div id="layer1" style="position:fixed; left:20px; width:65%; top:20px; visibility:hidden;">
<img id='bigimage' src='blank.jpg' onClick="hideIt();" alt='Click to close this image'>
</div>
</body></html>

Code not guaranteed, but may be a jumping point

Member Avatar for MJ Pieterse

i would suggest that you rather try all with css. there is some great tutorials out there with css galaries

Member Avatar for stockton

I do not think that the css methods are going to do what I want as they all seem to require preloading everything which is exactly what I do not want to do, so I am going to start working with almostbob's suggestion and see where that gets me.

Member Avatar for stockton

I have coded prince1.shtml based on almostbob's suggestion but am having a problem getting the bigimage to display. Suggestions please.

Member Avatar for almostbob

I have coded prince1.shtml based on almostbob's suggestion but am having a problem getting the bigimage to display. Suggestions please.

I wasnt happy with this document.getElementByID('bigimage').src=image;} but I couldnt see an error either my javascript is **expletive deleted**
there could be quotes in my javascripts, that I cant think of.
anyone who is good at javascript,
please help

I found at http://www.webdeveloper.com/forum/archive/index.php/t-64917.html a similar thread with answers
DosVdanye

Member Avatar for MidiMagic

Do NOT make images expand when the mouse moves. Nothing makes me hit the BACK button faster than a page that changes when you move your mouse. It's annoying.

The user should click to get as larger image.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.