• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

PHP file that basically functions as folder image viewer

masterchief

Well-known member
This piece of code contains method for creating an array of images from folder and allowing the viewer to navigate FIRST,LAST,PREV, NEXT... maintaining the contents of the image folder is the only tasking required after setting this up. I need your help figuring out how to set this up inside an XenForo page.. I was thinking that this would go well with something like [LN]-Blog ... peace

Example: http://www.masterchief.com/community/comicgallery.php

Code:
<?php
// ------------------------------------------------------------------------- //
// Comic Gallery 1.2                                                        //
// ------------------------------------------------------------------------- //
// Copyright (C) 2005 Stuart Robertson                                      //
// http://www.designmeme.com/                                                //
// ------------------------------------------------------------------------- //
// This program is free software; you can redistribute it and/or modify      //
// it under the terms of the GNU General Public License as published by      //
// the Free Software Foundation; either version 2 of the License, or        //
// (at your option) any later version.                                      //
//  A summary is available at http://creativecommons.org/licenses/GPL/2.0/  //
// ------------------------------------------------------------------------- //
// Edit the code below to configure your Comic Gallery                      //
// ------------------------------------------------------------------------- //

// Your images directory, relative to the page calling this script
$imagedir="comics";

// To start at the last image use "last"
$startimage="first";

// Copyright name to display, for none use " "
$copyright=" ";

// Creative Commons license, for none use " "
// example: "http://creativecommons.org/licenses/by/2.0/"
$creativecommons=" ";

// type of divider, for none use " "
$divider="&middot;";

// show arrows, for none use 0
$arrows=1;

// show back and next, for none use 0
$backnext=1;

// show back and next, for none use 0
$firstlast=1;

// show numbers, for none use 0
$numbers=1;

// numbers per line
$linelength=10;

// navigation position, for aboe use "above"
$navplacement="below";

// ------------------------------------------------------------------------- //
// Do not edit below this line
// ------------------------------------------------------------------------- //

//    initialize variables
$pics=array();
$count=0;

// Open the directory
$comicdir=opendir($imagedir);

//    read directory into pics array
while (($file = readdir($comicdir))!==false) {
    //    filter for jpg, gif or png files...
    if (substr($file,-4) == ".jpg" || substr($file,-4) == ".gif" || substr($file,-4) == ".png" || substr($file,-4) == ".JPG" || substr($file,-4) == ".GIF" || substr($file,-4) == ".PNG"){
        $pics[$count] = $file;
        $count++;
        }
}
closedir($comicdir);

// check for the picture to view
$pic=$_GET['p'];
//    if no picture variable...
if ($pic=="") {
    if ($startimage!="last"){ $pic=1; }
    else { $pic=$count; }
}

//    sort the filenames alphabetically
sort($pics);
reset($pics);

//    determine which picture to get
for ($f=0;$f<=sizeof($pics)-1;$f++){if ($pic==$pics[$f]){$selected = $f+1;}}

//  check for javascript...
if ($pic && !preg_match("/javascript/",$pic)){

    //  get current image file
    $current=$pics[$pic-1];
    $next=$pic+1;
    if ($next > sizeof($pics)){ $next=sizeof($pics); }
    $back=$pic-1;
    if ($back < 1){ $back=1; }

    //  display image above nav
    if ($navplacement!="above"){
        if (substr($current,-4) == ".jpg" || substr($current,-4) == ".gif" || substr($current,-4) == ".png" || substr($current,-4) == ".JPG" || substr($current,-4) == ".GIF" || substr($current,-4) == ".PNG"){
                if ($pic < sizeof($pics)){
                    echo"\n<p id=\"cg_img\"><a href=\"?p=".$next."\"><img src=\"".$imagedir."/".$current."\" alt=\"Next\" /></a></p>\n";
                } else {
                echo"\n<p id=\"cg_img\"><img src=\"".$imagedir."/".$current."\" alt=\"End\" /></p>\n";
                }
            }
    }

    // display back and next
    if ($backnext != 0 || $arrows != 0){
            if (sizeof($pics) > 1){
                echo "<p id=\"cg_nav1\">";
                if ($firstlast != 0){
                    if ($pic > 1){    echo "<a href=\"?p=1\" id=\"cg_first\"><span>First</span></a>"; }
                    else { echo "<span id=\"cg_first\"><span>First</span></span>"; }
                    echo "<span class=\"cg_divider\"> ".$divider." </span>";
                }
                if ($pic > 1){
                    echo "<a href=\"?p=".$back."\" id=\"cg_back\"><span>";
                    if ($arrows != 0) { echo "&laquo; "; }
                    if ($backnext != 0) { echo "Back"; }
                    echo "</span></a>";
                } else {
                    echo "<span id=\"cg_back\"><span>";
                    if ($arrows != 0) { echo "&laquo; "; }
                    if ($backnext != 0) { echo "Back"; }
                    echo "</span></span>";
                }
                echo "<span class=\"cg_divider\"> ".$divider." </span>";
                if ($pic < sizeof($pics)){
                    echo "<a href=\"?p=".$next."\" id=\"cg_next\"><span>";
                    if ($backnext != 0) { echo "Next"; }
                    if ($arrows != 0) { echo " &raquo;"; }
                    echo "</span></a>";
                } else {
                    echo "<span id=\"cg_next\"><span>";
                    if ($backnext != 0) { echo "Next"; }
                    if ($arrows != 0) { echo " &raquo;"; }
                    echo "</span></span>";
                }
                if ($firstlast != 0){
                    echo "<span class=\"cg_divider\"> ".$divider." </span>";
                    if ($pic < sizeof($pics)){    echo "<a href=\"?p=". sizeof($pics) ."\" id=\"cg_last\"><span>Last</span></a>"; }
                    else { echo "<span id=\"cg_last\"><span>Last</span></span>"; }
                }
                echo "</p>\n";
            }
    }

    // display numbers
    if ($numbers != 0){
        if (sizeof($pics) > 1){
            //    display textlinks
            echo "<p id=\"cg_nav2\">";
            // loop over images
            for ($f=1;$f<=sizeof($pics);$f++){
                // if the link to the pic is the selected one, display a bold number and no link
                if ($pic==$f){echo "<b>".$f."</b>";}
                // otherwise display the link
                else{echo "<a href=\"?p=".$f."\">".$f."</a>";}
                // add dividers and linebreaks
                if (($f % $linelength) == 0) {
                    echo "<br />";
                }
                else {
                    if ($f!=sizeof($pics)){
                        echo "<span class=\"cg_divider\"> ".$divider." </span>";
                    }
                }
            }
            echo "</p>\n";
        }
    }

    //  display image below nav
    if ($navplacement=="above"){
        if (substr($current,-4) == ".jpg" || substr($current,-4) == ".gif" || substr($current,-4) == ".png" || substr($current,-4) == ".JPG" || substr($current,-4) == ".GIF" || substr($current,-4) == ".PNG"){
                if ($pic < sizeof($pics)){
                    echo"\n<p id=\"cg_img\"><a href=\"?p=".$next."\"><image src=\"".$imagedir."/".$current."\" alt=\"Next\" border=\"0\"></a></p>\n";
                } else {
                echo"\n<p id=\"cg_img\"><image src=\"".$imagedir."/".$current."\" alt=\"End\" /></p>\n";
                }
            }
    }

    // display copyright
    echo "<p id=\"cg_credits\">";
    if ($creativecommons != " "){ echo "<a href=\"".$creativecommons."\" title=\"Creative Commons License\">Some Rights Reserved</a> ".$divider." "; }
    else {
        if ($copyright != " "){ echo "&copy; ".$copyright." ".$divider." "; }
    }
    // If you make use of this script, be nice and keep the link back to my site :-)
    echo "Powered by <a href=\"http://designmeme.blogspot.com/2005/05/comic-gallery-script.html/\">ComicGallery</a></p>\n";
}
?>
 
Like that?
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Anything more intricate would require serious editing of that script, luckily it is under GNU licensing so you can do what you want with it :-).
 
Like that?
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Anything more intricate would require serious editing of that script, luckily it is under GNU licensing so you can do what you want with it :).

thats the idea... looks great
 
I am going to try and rewrite this thing and do some custom css (what you saw there was 6 changes to the code - css dropped - all wrapped in an iframe).
The way I did it allows me to play around with it to see how I want to style it with out breaking my XF :-). Once I have settled upon sizes, colors and placement I will edit the script to use different classes as I was having issues with the default way the script was written (maybe has to do that it was written for WP , I dunno)

At any rate you only really need to upload the files to your server (I put them in their own dir.) and include literally one or two lines ( I don't remember, bare with me I am stupid sick right now) in whatever page your calling it to. I am going to start from scratch in a few minutes and try to include this in a page a totally different way then completely rewrite this whole thing. If I end up liking my results I will donate to the original author and re release the modified version under GNU as well and upload it here (somewhere @XF).

In the mean time do you want a simple guide to include it in an iframe on a XF created page?
 
I dont think we need the page numbers, or at least have ability to set display of them ON/OFF, the image display should default to most recent image (last image in image directory???) and have ability to set to first or most recent image

I think an iframe would be best.. I am also looking for ability to provide blog type comment from comic author that paginates under the image, with page navigation.

Multiple comics can be hosted each having their own unique page with designated image directories is what I envision.

This setup will allows website operator to host webcomics from anyone, in addition to personal projects, no limit.

Ability to provide image prints and comic prints for sale is desirable.. signed / unsigned

This addon has potential to bring in more XenForo customers. Marvel Comics has digital online comics as well as others, so there is a big audience for this stuff that exists already.

My favorite webcomic is Runners Universe

More than willing to compensate you for this.
 
Well see that's the thing ...I do not yet have the skill to construct a proper addon yet...I am still learning. Pretty much anything you see me do up until that point will be done manually per mod. I am just learning php and mastery is quite a long way from where I stand I think. That is a massive undertaking for me as the best I could do would fall well short of what you desire and I really can't take your money even if I could...principle wise and that's just me.

I can make a medium rare type of mock up of that idea but if you want one well done your probably better off coming up with a visual representation if you can of what you want be it on photoshop or hand-sketched and scanned or photographed and make a request for this in the "Requests" category.

At any rate I will share what I have come up with as far as this comic script is concerned here or in another thread and link to it when I finish. I have also finished semi-incorporating chess into xf with kotomi and just need to figure out how to have it use my xenforo DB instead of it's own so it can use registered users of xf rather than having users need to register at the chess page. Either way like I said I will share pretty much almost anything worthy (at the time and considering my skill level) that I feel someone may or may not use. That's my 2cents and it will never be worth a paypal donation. :-) I'll update here with whatever travesty I manage to render...cheers to yah pal.
 
This piece of code contains method for creating an array of images from folder and allowing the viewer to navigate FIRST,LAST,PREV, NEXT... maintaining the contents of the image folder is the only tasking required after setting this up. I need your help figuring out how to set this up inside an XenForo page.. I was thinking that this would go well with something like [LN]-Blog ... peace
Example: http://www.masterchief.com/community/comicgallery.php

Create New Add-on

Add-on ID: Comic
Title: Comic Gallery
Version String: 1
Version ID: 1

Create New Route Prefix

Route Prefix: comic
Route Type: Public
Route Class: Comic_Route_Prefix_Prcomic
Use class to build link: Always
Add-on: Comic Gallery

Create New Template

Template Name: EP_Comic

Add-on: Comic Gallery

Template code:

PHP:
<xen:title>Comic Gallery</xen:title>
<xen:pagenav link="comic" page="{$page}" perpage="{$itemsPerPage}" total="{$totalItems}" />
<br style="clear: both;" />
<div class="sredina">
{xen:raw $html}
</div>
<xen:pagenav link="comic" page="{$page}" perpage="{$itemsPerPage}" total="{$totalItems}" />

Create New Code Event Listener

Listen to Event: navigation_tabs
Execute Callback: Comic_Listeners_Navigation ::navtabs
Callback Execution Order: 10
Enable callback execution
Add-on: Comic Gallery

Comicgallery.php
Your images directory, relative to the page calling this script
$imagedir="../comic";

Demo: http://206.123.115.165/xforum/comic/
 

Attachments

Well...that was fast...:-) I think you found your modder masterchief or rather he/she found you. lol

Create New Add-on

Add-on ID: Comic
Title: Comic Gallery
Version String: 1
Version ID: 1

Awesome job boban..I am looking at the addon now and comparing it to the original script...hope I can understand how you did this with such ease.
 
@boban . I really like what you did to get this script working inside XenForo. There is much more to do. Thank you! One very important issue is to be able to create any number of comic titles using this addon, all of them independent, each own image directory. I want to give comic developer option of combining imagery and text, so a journal/blog whatever to call it would be paramount with page navigation. I would prefer to lose the page numbering concept and go to FIRST - PREVIOUS - NEXT - LAST navigation scheme, with ability to toggle display of FIRST/LAST comic page as default for the viewer .. FYI - we are looking at display of 750px width and 1152px height MAX comic images... panels and covers

I am gonna play with this one for a while. Great work!

QUESTION: what advantages are to be gained by using mySQL tables for this project? I was thinking that the images themselves could be accessed directly using filesystem, focusing on realistic filenaming convention in order to control display order. seems we are finally getting somewhere... peace.

@EQnoble whatcha think, this helping you out at all?

peace to all... and THANK YOU!
 
comicgallery.php

add:
$mycomment='My Comment <div><p> etc ';

$viewParams = array(
'mycomment' => $mycomment,
.............
.....

In template add:

<div class="">
{xen:raw $mycomment}
</div>
 
Top Bottom