How do i do this web technique? ...

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

Post Reply
Qua Sar
Forum Newbie
Posts: 5
Joined: Thu Dec 11, 2008 10:37 pm

How do i do this web technique? ...

Post 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
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

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

Post by Chris Corbyn »

Search around for "pagination".
Qua Sar
Forum Newbie
Posts: 5
Joined: Thu Dec 11, 2008 10:37 pm

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

Post 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.
websight
Forum Newbie
Posts: 8
Joined: Sun Oct 19, 2008 1:50 am

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

Post 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.
Qua Sar
Forum Newbie
Posts: 5
Joined: Thu Dec 11, 2008 10:37 pm

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

Post 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.
htdung
Forum Newbie
Posts: 17
Joined: Sun Apr 27, 2008 6:35 am

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

Post 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.
cavemaneca
Forum Commoner
Posts: 59
Joined: Sat Dec 13, 2008 2:16 am

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

Post 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.
Qua Sar
Forum Newbie
Posts: 5
Joined: Thu Dec 11, 2008 10:37 pm

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

Post 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.
cavemaneca
Forum Commoner
Posts: 59
Joined: Sat Dec 13, 2008 2:16 am

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

Post 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.
Qua Sar
Forum Newbie
Posts: 5
Joined: Thu Dec 11, 2008 10:37 pm

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

Post 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.
Post Reply