Page 1 of 1

How do i do this web technique? ...

Posted: Thu Dec 11, 2008 10:40 pm
by Qua Sar
Hey i'm not sure where this thread goes but,
I made a website awhile ago (it's not up at the moment or i'd show you) where you click on the link "Pictures" and it goes to a pop-up window/new tabbed window (either/or not sure which) that in the lower right has 1 out of xx and in the middle is the picture. Now is there a simple way to have that page generated and automatically when you click to go to the next picture the number updats... to say 2 out of xx, 3 out of xx, and auto-load the next picutre. I am trying to figure out how to basically make a gallery efficently without having one page per picture and linking them all, because this gets tedious if you have 72 pictures (that's how i did it on this website becuse i wasn't sure how to do it any other way).

Thanks,Kamron

Re: How do i do this web technique? ...

Posted: Fri Dec 12, 2008 12:28 am
by Chris Corbyn
Search around for "pagination".

Re: How do i do this web technique? ...

Posted: Fri Dec 12, 2008 11:06 am
by Qua Sar
http://kurafire.net/log/archive/2007/06 ... nation-101

I have something liek this set up, BUT when you go to the next link (if it's a page) is there a way to make it NOT a brand new webpage, so that way when you click next it just generates it and puts the "next picture in line" there... this way if i have 200 pictures and use a scheme like that website says, i will not have 200 webpages.

Pagination (it seems) is just the way to set up pages, not how to link them etc.

Re: How do i do this web technique? ...

Posted: Fri Dec 12, 2008 3:38 pm
by websight
Qua Sar wrote:Hey i'm not sure where this thread goes but,
I made a website awhile ago (it's not up at the moment or i'd show you) where you click on the link "Pictures" and it goes to a pop-up window/new tabbed window (either/or not sure which) that in the lower right has 1 out of xx and in the middle is the picture. Now is there a simple way to have that page generated and automatically when you click to go to the next picture the number updats... to say 2 out of xx, 3 out of xx, and auto-load the next picutre. I am trying to figure out how to basically make a gallery efficently without having one page per picture and linking them all, because this gets tedious if you have 72 pictures (that's how i did it on this website becuse i wasn't sure how to do it any other way).

Thanks,Kamron
The effect that you are looking for sounds to me like something called a Lightbox. Try googling Lighbox Scripts or the like and you should come up with one that works for you.

Re: How do i do this web technique? ...

Posted: Fri Dec 12, 2008 5:01 pm
by Qua Sar
not exactly... although lightbox is an intersting way to deal with pictures... i am going to sign up for a simple webhost and put the site up and loink you guys so you guys can better see what i am trying to do. I will reply here when i have got it set up.


ALRIGHT,
http://webtests.yakkel.com/ there's the site i'm talking about.
Now, if you click photos then click any of hte pictures on the left that appear a pop-up window will appear. On the lower right this will appear "< 1 out of x >" with x being the last picture. Now if you click the picture or the < or > you will go backwards or forwards. Now i like the set-up, but the problem is if i have 72 pictures or so (one of them has about that) linking them all takes forever bcuase i have to link for if you click the picutre, then link for the two arrows. Now is there a better way to code this so i don't have 72 different websites all witha different picture but the exact same layout, is what i'm trying to get at.

Re: How do i do this web technique? ...

Posted: Fri Dec 12, 2008 9:52 pm
by htdung
The Lightbox Script get an issue. When you display the list of pictures, the visitors must wait for all the thumnails pics loaded, then, you can see the effect.
JQuery doesn't, try google the key "jquery lightbox". I think you will be satified.

Re: How do i do this web technique? ...

Posted: Sun Dec 14, 2008 12:26 am
by cavemaneca
Do you need to use anything specific? Like Php or javascript or anything? because as long as the pictures are named cuba_1, cuba_2, ... cuba_n or the like it would be a piece of cake to throw together a php script for that.

Re: How do i do this web technique? ...

Posted: Sun Dec 14, 2008 11:15 am
by Qua Sar
nothing specifically, and i technically don't have to do it for this one. But i do not liek the layout i made here in terms of having one webpage per website... how would it be done in php? I am still working on learning php better.

Re: How do i do this web technique? ...

Posted: Mon Dec 15, 2008 1:51 pm
by cavemaneca
do something like this

Code: Select all

<?php
 
  // init variables
  $pic_num = 1;
  $pic_max = 10;
  $pic_prefix = 'cuba';
  $pic_format = '.jpg';
 
  if (isset($_GET['number'])) {$pic_num = $_GET['number'];}
 
  // set img links and src
  $pic = $pic_prefix.$pic_num.$pic_format;
  $pic_back = $pic_num - 1;
  $pic_forward = $pic_num + 1;
  if ($pic_back < 1) {$pic_back = $pic_max;}
  if ($pic_forward > $pic_max) {$pic_forward = 1;}
 
  // display pic and links
?>
<html>
  <head>
    <title>Pictures Page</title>
  </head>
  <body>
    <img src="image/dir/<?php echo $pic; ?>"><br>
    <a href="<?php echo $_SERVER['PHP_SELF']."?number=".$pic_back; ?>"><</a>&nbsp;
    <?php echo $pic_num." of "; echo $pic_max; ?>&nbsp;
    <a href="<?php echo $_SERVER['PHP_SELF']."?number=".$pic_forward; ?>">></a>&nbsp;
  </body>
</html>
Working Example
Notes: As it show in the example you might want to set a fixed size for all of the pictures, or resize them all before adding to the list. Number ten is bigger than the whole page, and you have to scroll to access the links.
(And, I picked out the first ten pictures I could find :D )

Of course, this is a pretty minimal way of doing it, and you can't name the pictures anything you want. If I were to do this for my own site, I would put all of the names of the pictures in a database with unique ID's, and have it reference to the database and receive the name for displaying, that way, It would automatically find out how many pictures there are, and I wouldn't need to rename all of them, and I could sort them alphabetically or what not.

So what I mean is, if you don't mind a script that you have to fix every time you upload(though there isn't much to fix) and you have to rename every picture with only one way of sorting them, go ahead and use the script I posted. It's actually decently flexible. But I would recommend learning how to use databases and re writing this script to use them.

Re: How do i do this web technique? ...

Posted: Mon Feb 02, 2009 4:59 pm
by Qua Sar
Thank you for help on the php code... it was just what i was looking for with some modification of course, to adapt my pictures and eveyrthing.