473,386 Members | 1,793 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

photo thumbnail and full view pages

Hi all,

I'm trying to expand my school's website with new features we've not had before and one of the things I've been wanting to do is to add a photo's section to the website.

What I'd like is this:

a photos page that has links to different photo albums (which i can do fine)

if i were to select an album to view what i'd like is a page of thumbnails, say 24 photos per page arranged in a grid style, 6 rows of 4 thumbnails in each row

a next page/previous page selector at the bottom (which i haven't tried but think I can do)

and an enlarged view, so if you click on a picture you get a larger picture on the same page instead of opening a new window, and can then scroll through all the pictures full size

hope this makes sense. if you want to see what I'd like to do then check out this page:

http://www.dephotos.co.uk/cgi-bin/pr...2020th%20March

any geniouses care to help out an amateur web developer

many thanks!!!
Jul 12 '08 #1
6 3047
idsanjeev
241 100+
You can do it with the help of javascripts
try this code
Expand|Select|Wrap|Line Numbers
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7. </head>
  8.  
  9. <body>
  10. <!--Insert this code in the body section and set with your images-->
  11. <script language="javascript" type="text/javascript">
  12.  
  13. <!-- Begin
  14. browserName = navigator.appName;
  15. browserVer = parseInt(navigator.appVersion);
  16.  
  17. ns3up = (browserName == "Netscape" && browserVer >= 3);
  18. ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
  19.  
  20. function doPic(imgName) {
  21. if (ns3up || ie4up) {
  22. imgOn = ("" + imgName);
  23. document.mainpic.src = imgOn;
  24.    }
  25. }
  26. //  End -->
  27. </script>
  28. <center>
  29. <table width=360 border=1 cellspacing=0 cellpadding=0>
  30. <tr>
  31. <td><a href="javascript:doPic('img1.jpg');"><img src="img1.jpg" width=90 height=60 border=0></a></td>
  32. <td><a href="javascript:doPic('img2.jpg');"><img src="img2.jpg" width=90 height=60 border=0></a></td>
  33. <td><a href="javascript:doPic('img3.jpg');"><img src="img3.jpg" width=90 height=60 border=0></a></td>
  34. <td><a href="javascript:doPic('img4.jpg');"><img src="img4.jpg" width=90 height=60 border=0></a></td>
  35. </tr>
  36. <tr>
  37. <td colspan=4 align=center><img name="mainpic" src="img1.jpg" width=365 height=190 border=0></td>
  38. </tr>
  39. </table>
  40. </center>
  41. </body>
  42. </html>
  43.  
  44.  
Jul 14 '08 #2
thanks for that - apart from the java the thumbnails work a treat - for some reason the javascript doesn't work - is there something extra that I need? maybe another app installed or something

Anyways - like I said code is ace. One thing though - is there a way that I can get the photos opening up on their own instead of in a bigger box underneath the thumbnails? I don't really want to go through and put seperate pages for all the pictures so that they open up in their own window, but I'd prefer it to open the picture full size with no thumbnails, then have maximum thumbnails on a page

would this be easier linking into a SQL database, as I have a fair few hundred photos to put on here if it works. If so how would I integrate SQL into this? and make it so that I could have one full page for photos and have it just display a photo full size based on what was clicked?


sorry this is starting to get too much to ask i know!!! really grateful!!!
Jul 14 '08 #3
jeffstl
432 Expert 256MB
Yes you are asking alot.

The javascript posted works fine for me . Quite excellent in fact. If its not working for you make sure the image paths are all correct

Yes if you have that many images to deal with you would want to generate a page like the one posted for each set of images or an array of images read from a database. That way you can build ONE page that can be built to handle searches or navigation through the many images.

A database table with all the image paths\names in it would work fine. Then you would read, loop through and write out a given set of images into a dynamic page of the one posted above. Changing the number of images shown at once to whatever you desire.

If you want a link to the full image then just have a link open a new window when they click on the main image that points directly to the image itself, rather then a html page, or asp page. (Like link directly to http://www.mysite.com/images/imagename.jpg )
Jul 14 '08 #4
jeffstl
432 Expert 256MB
I guess also if you are not sure how to do all this you would need to read up on using ASP with Access or MySQL or whatever database you are using.
Jul 14 '08 #5
idsanjeev
241 100+
thanks for that - apart from the java the thumbnails work a treat - for some reason the javascript doesn't work - is there something extra that I need? maybe another app installed or something

Anyways - like I said code is ace. One thing though - is there a way that I can get the photos opening up on their own instead of in a bigger box underneath the thumbnails? I don't really want to go through and put seperate pages for all the pictures so that they open up in their own window, but I'd prefer it to open the picture full size with no thumbnails, then have maximum thumbnails on a page

would this be easier linking into a SQL database, as I have a fair few hundred photos to put on here if it works. If so how would I integrate SQL into this? and make it so that I could have one full page for photos and have it just display a photo full size based on what was clicked?


sorry this is starting to get too much to ask i know!!! really grateful!!!
After putting codes in body section it working fine .
i don't know whats your need to display all photo thumbnail you may use it with slide show or fader image show and display it on actual size of image popup window or in photo thumbnail sow it with expanded size on mouse over .
otherwise if you think this be easier linking into a SQL database then try it .
if you don't mind post your code here if getting any easier way ......
thanks
jha
Jul 15 '08 #6
Yes you are asking alot.

The javascript posted works fine for me . Quite excellent in fact. If its not working for you make sure the image paths are all correct

Yes if you have that many images to deal with you would want to generate a page like the one posted for each set of images or an array of images read from a database. That way you can build ONE page that can be built to handle searches or navigation through the many images.

A database table with all the image paths\names in it would work fine. Then you would read, loop through and write out a given set of images into a dynamic page of the one posted above. Changing the number of images shown at once to whatever you desire.

If you want a link to the full image then just have a link open a new window when they click on the main image that points directly to the image itself, rather then a html page, or asp page. (Like link directly to http://www.mysite.com/images/imagename.jpg )
yes after looking closely at the code i didn't realise i needed to put the image name in both

<td><a href="javascript:doPic('img2.jpg');"><img src="img2.jpg" width=90 height=60 border=0></a></td>

and

<td><a href="javascript:doPic('img2.jpg');"><img src="img2.jpg" width=90 height=60 border=0></a></td>

quite how i managed to decide that it didn't need to go in both i don't know

The original idea was going to have the pictures open up larger in a seperate window - but i wanted to avoid navigating the person away from the website if at all possible. That's why i wanted the picture to open up in another html page that was linked into the photo album. But i migh tre-think that and add it in if i have time

at the moment we are using SQL database elsewhere on the site for other things so hopefully I can use this to help the user select different albums

@ idsanjeev

the reason i don't want to use the java window or a fader/slideshow feature is because each album is potentially 100+ photos, so I wanted to minimise caching and loading times

thanks for all your help :)
Jul 16 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Preston Crawford | last post by:
I'm looking to quickly get a photo album online. Very simple, thumbnails, a few pages, maybe a description, but hopefully a small script that's easy to edit and work into my existing site. I know...
5
by: Joseph Ellis | last post by:
Hello all. I have a family website that I have been maintaining for the past year and a half or so. It includes a photo album that has grown quite large. So far I've displayed the photo album...
5
by: fraser | last post by:
Hi, I have a photo gallery with cat photos here http://mouserspage.cjb.net From the beginning, I have been making each page of thumbnails, with a separate page for each photo, entirely in...
3
by: Ben Cartwright | last post by:
I'd like to create an ASP.NET-based photo album. Rather than creating a bunch of HTML pages as in a typical photo album, I'd like to leverage the dynamic capabilities of ASP.NET. Any suggestions...
2
by: Guadala Harry | last post by:
I created a simple "photo album" page; it has a bunch of ImageButton controls that display the thumbnails - and then an Image control that displays the full-sized image when the corresponding...
3
by: bob garbados | last post by:
I'm looking for thoughts on photo galleries and security/performance implications... I'm working on an asp.net site in vb that will include an updateable photo gallery that will display thumbnails...
13
by: Viken Karaguesian | last post by:
Hello everyone, Can anyone recommend a good online site to learn PHP? The W3Schools website is quite lacking - leaves much to be desired. I'm sure there are many places, but which ones are good?...
1
by: Throw | last post by:
G'day everyone I'm looking for a simple photo gallery script in PHP (or Perl), but not too simple. I have tried several photo gallery scripts in either language and I have found that they are...
1
by: Xah Lee | last post by:
The following is a program to generate thumbnail images for a website. Useful, if you want to do that. It is used to generate the thumbnails for my “Banners, Damsels, and Mores” project...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.