need a php script for showing sequential images

kitaabghar · #1 (**permalink**) 06-15-08, 03:51 AM

Hi!

I need a small clean script to show sequential images on my website ( http://kitaabghar.com ) with next previous links.

I am publishing urdu books (pages in image format) for urdu reading community. All images of a book are sequential order e.g., mybookpage-1.gif, mybookpage-2.gif, mybookpage-3.gif......mybookpage-100.gif

Will some kind heart, nice guy or gal can make me this simple php script? There are many scripts with auto directory reading and thumbnails generation but I DONT NEED THEM. I need a very very simple sequential images showing script.

The script may have:

$imagespath=/bookfolder/
$imagename=mybookpage-
$totalimages=100

The navigation may have:

Next || Drop Down Menu showing all images to jump directly || Previous

Please see the attached image for example.

Hassan

nashruddin · #2 (**permalink**) 06-16-08, 01:32 AM

Like this?

PHP Code:


			
<?php

/* setup variables */

$imgpath   = 'img';

$imgprefix = 'mybookpage-';

$imgext    = '.jpg';

$imgcount  = 3;

$currpage  = (empty($_GET['page']))  ? 1 : $_GET['page'];



/* function to create pagination links */

function get_pagination($total, $current)

{

    $pagination = '';

    

    if ($current > 1) {

        $pagination .= "<a href=\"{$_SERVER['PHP_SELF']}?page=" . ($current-1) . "\">Prev</a>"; 

    }



    $pagination .= '<select id="page" onchange="javascript:gotoPage()">';

    

    for($i = 1 ; $i <= $total ; $i++) {

        if ($i == $current)

            $pagination .= "<option value=\"$i\" selected>$i</option>";

        else

            $pagination .= "<option value=\"$i\">$i</option>";

    }

    

    $pagination .= '</select>';

    

    if ($current < $total) {

        $pagination .= "<a href=\"{$_SERVER['PHP_SELF']}?page=" . ($current+1) . "\">Next</a>"; 

    }

    

    return($pagination);

}

?>



<html>

<head>

<script type="text/javascript">

function gotoPage() {

    var page = document.getElementById('page').value;

    document.location.href = "<?=$_SERVER['PHP_SELF']?>?page=" + page;

}

</script>

</head>

<body>

 <h2>Page: <?=$currpage?></h2>

 <div id="show-img">

  <img src="<?=$imgpath?>/<?=$imgprefix?><?=$currpage?><?=$imgext?>" border="0" alt="">

 </div>

 <div id="pagination">Go to page: <?=get_pagination($imgcount, $currpage)?></div>

</body>

</html>

Note: you might want to display your pages' thumbnail. See my class to generate image's thumbnail on-the-fly at:

http://www.nashruddin.com/create-ima...n-the-fly.html

Let me know if you have trouble with my script.

kitaabghar · #3 (**permalink**) 06-16-08, 07:58 AM

YESSSSSS Dear, exactly like this.

Thankyou so much, you saved my day

I have checked your site and like this line most (in ABOUT)
Cool PHP programmer writing cool PHP scripts. Feel free to contact me@nashruddin.com

I have just checked this script as it is, and its working fine. However, when I will try to modify this to meet with my needs (like adding images on NEXT / PREVIOUS links and adding image layering to protect the original image etc., if I face any problem, I will bother you again.

One more thing, I would like to add in this script is pre-loading the NEXT image. Almost all images are above 100k and took a while on loading, so is there anyway we can pre-load the NEXT image when the current image is fully loaded? I mean the script:

open 1st page, display relevant 1st image and
then pre-load the 2nd image.

likewise, when the reader moves to 2nd page, the 2nd image display at once and then pre-load the 3rd image

I want to save my readers from waiting when the image is being loaded and they can start the page as soon as they click on the page

Thankyou again for your help

Hassan

Quote:

Originally Posted by nashruddin

Like this?

Note: you might want to display your pages' thumbnail. See my class to generate image's thumbnail on-the-fly at:

http://www.nashruddin.com/create-ima...n-the-fly.html

Let me know if you have trouble with my script.

nashruddin · #4 (**permalink**) 06-17-08, 08:26 AM

It's possible to write a pre-loading, but I think that won't be efficient. if the user wants to see image 1 and the script loads both image 1 and image 2, then it would take longer time for the user just to see image1.

I think it would be better this way. Suppose the user wants to see image 3, then:
1. display image 3
2. display image 2's thumbnail on the left side
3. display image 4's thumbnail of the right side

and when the user request for the next image, no need to refresh the entire page. Just load the requested image. This is possible using Javascript. To entertain the user, a loading animation is displayed.

Hey, I think this is a cool idea. now I'd like to write such a script and post it in my blog.

kitaabghar · #5 (**permalink**) 06-19-08, 12:37 AM

Assalam Alaikum!

As I requested earlier, my suggestion was, once the CURRENT image loads, then the NEXT image may be pre-loaded. So while the reader is reading CURRENT page, the NEXT image starts loading or pre-loading.

Thumbnails is a good idea for images containings graphics. My images contain text so there is no use for creating thumbnails of my pages. Thats why I am not interesting in thumbnails for book pages.

I have appended your script on this page

http://kitaabghar.com/bookbase/umaira/darbare-dil.html

Thanks again for your generous help.

Hassan

Quote:

Originally Posted by nashruddin

It's possible to write a pre-loading, but I think that won't be efficient. if the user wants to see image 1 and the script loads both image 1 and image 2, then it would take longer time for the user just to see image1.

I think it would be better this way. Suppose the user wants to see image 3, then:
1. display image 3
2. display image 2's thumbnail on the left side
3. display image 4's thumbnail of the right side