Image Gallery Block [PHP Gallery + Lightbox viewer]

[akulion]

Hi 

yo  :coolsmiley:

-Dont want to clutter your database up with new script tables?
- Dont want to go through the hassle of installing one of those bulky gallery scripts?
- Tired of having template clash issues between SMF / TP and your Gallery script?

Well then read on......

Gallery In a block
By: Dynamic Drive

Demo: Click here and browse down

The gallery you saw in the demo was LITERALLY created in 15 minutes with all the images and work! Its that simple!

Advantages
    *  Its fast, its AJAX, its clean and easy to use
    *  Uses an external PHP file to retrieve all images within a directory to show on the fly.
    * Customize the album's dimensions as desired, such as 3 by 2 images, 4 by 5 images etc.
    * Ability to sort the display order of the images by file date (ascending or descending). The default is "by file name" (alphabetically).
    * The script automatically builds navigational links to allow the viewer to cycle between "batches" of images.
    * Each batch of images are only downloaded when they are viewed.
    * Each image is hyperlinked to itself or to a larger version of the image, and the link can optionally be set to open in a popup window. (note)
    * CSS based styling for easy customization and very lightweight code.

Disadvantages Other members of your forum cannot upload images or have their personal galleries

Its simple to install but takes some work on the users part to create the thumbnail images...thats all

===================
Install Instructions
===================


Step 1. Download

Download this file getpics.php by right clicking the link and 'saving as'. Be sure to take off the .txt extention so that it becomes a normal php file.

Step 2. Creating folders
Go to your forum root (i.e. yoursite.com/smf ) and create 2 folders there called:

gallery
largegallery

The gallery folder will contain the thumbnails
and the largegallery folder will contain the full sized images

Recommended size of thumbnails is 150 x 90 (since it looks nicer)

Step 3. Creating the thumbnails
Open your photo editor and make thumbnails of all the images you wish to use in your gallery (the thumbnails MUST be the same name as the original images - thats why they are placed in seperate folders!)

Alternatively you could use this thumbnail creator freeware program to make this task simple: Easy Thumbnails Freeware
Simply put all the images you want in your gallery in a folder on your PC and make Easy Thumbnails generate the thumbnails for them all in a matter of seconds! (be sure to specify in settings NOT to use a prefix, the thumbnails MUST be the same name as the original images - thats why they are placed in seperate folders!)

Step 4. Creating the block
Simply take this entire chunk of code and paste it into a center block OR if you want a 'seperate' gallery page you can always use an article and link to it

Note Please be sure to change the yoursite.com/forum instances n the code below to your page forum root address

Code Select Expand



<style type="text/css">
.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 150px;
height: 90px;
}
#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}
#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}
#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>
<center>
<script src="http://yoursite.com/forum/gallery/getpics.php" type="text/javascript"></script>
<script type="text/javascript">
/***********************************************
* PHP Photo Album script- ÂÃ,© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
var dimension="3x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://yoursite.com/forum/gallery/" //Absolute path to image directory. Include trailing slash (/)
var href_target="new" //Enter target attribute of links, if applicable
//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"]
//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[1, "Photo "]
//Sort images by date? ("asc", "desc", or "")
//"desc" for example causes the newest images to show up first in the gallery
//"" disables this feature, so images are sorted by file name (default)
var gsortorder="desc"
//By default, each image hyperlinks to itself.
//However, if you wish them to link to larger versions of themselves
//Specify the directory in which the larger images are located
//The file names of these large images should mirror those of the original
//Enter a blank string ("") to disable this option
var targetlinkdir="http://yoursite.com/forum/gallery/largegallery/"
/////No need to edit beyond here///////////////////
function sortbydate(a, b){ //Sort images function
if (gsortorder=="asc") //sort by file date: older to newer
return new Date(a[1])-new Date(b[1])
else if (gsortorder=="desc") //sort by file date: newer to older
return new Date(b[1])-new Date(a[1])
}
if (gsortorder=="asc" || gsortorder=="desc")
galleryarray.sort(sortbydate)
var totalslots=dimension.split("x")[0]*dimension.split("x")[1]
function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
tempcontainer+='</a><br />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}
function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("navlink"+y)!=null){
document.getElementById("navlink"+y).className=""
y++
}
document.getElementById("navlink"+p).className="current"
}
var curimage=0
for (y=0; y<dimension.split("x")[1]; y++){
for (x=0; x<dimension.split("x")[0]; x++){
if (curimage<galleryarray.length)
document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
curimage++
}
document.write('<br style="clear: left" />')
}
function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open(imgsrc.href, "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}
</script>
<!--Below HTML code refers to the navigational links for the gallery-->
<div id="navlinks">
<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>
</div>



DONT activate your block yet!!

Step 5. Uploading the content

Upload all your thumbnails to the gallery folder
Upload getpics.php to the gallery folder
Upload all your large images to the largegallery folder

Step 6. Activating your gallery

Go to your block settings area and activate and position your gallery to appear where you want

Step 7. Enjoying your gallery

Now go to your main page and enjoy looking at your gallery and dont forget to make cute noises every now and then like 'aaawww' and 'ooooo'

Step 8. Back to life

After all this is done it is safe to resume your normal life and also to stop pretending you are a wizard from Lord of The rings (which we know you secretly do in front of the mirror) .... (and yes we also have a video of you doing the macarena in front of your mirror)

The End

Further Notes

I am also trying to incorportate the Lightbox viewer into this gallery (with no luck so far) - so if anyone would like to lend a hand this could really make the gallery AWESOME

References

Dynamic Drive:
PHP Photo Album Script

[akulion]

Update

Light Box Viewer has been incorportaed successfully into the gallery

I have also updated the gallery on my page to have the lightbox viewer in it

To do so please follow these instructions:

Code Modifications

All modifications are to the Block code above ONLY (in post 1)

1. At the top of that code add this:

Code Select Expand



<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />



2. The look for the line:

Code Select Expand



var href_target="new" //Enter target attribute of links, if applicable



ADD AFTER it this line:

Code Select Expand



var href_rel="lightbox" //Enter target attribute of links, if applicable



3. Look for line:

Code Select Expand



var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"]



Replace with:

Code Select Expand



var popupsetting=[0, "width=500px, height=400px, scrollbars, resizable"]




4. Look for line:

Code Select Expand



var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'



REPLACE with:

Code Select Expand



var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'"  rel="'+href_rel+'">'



5. Look for line:

Code Select Expand



document.getElementById("navlink"+p).className="current"



ADD BELOW it:

Code Select Expand



initLightbox();



Thats all the code modifications done!

Uploading additional files

Download this ZIP Package

Upload the folders to your forum root (yoursite.com/smf/)

js
css
images


====================The End====================

Activate your block and enjoy the New Gallery with light box viewer

Note: Incorportaing light box into your galery will slow down page loading by a few seconds but not a biggie

References

Dynamic Drive
Lightbox Image Viewer 2.0

[akulion]

IMPORTANT UPDATE


The gallery dosent seem to be working properly with the lightbox viewer in place!

So Please disregard the instructions for implementing the lightbox viewer into ur gallery for now until I can figure out whats wrong.

Basically the viewer works fine when on page one, but once pages are switched (page 2 etc) the viewer stops working...

If anyone else would like to have a crack at this as well it would be really great!

****added****

ok I think I know whats wrong, but I dont know javascript to fix it - so maybe one of the gurus could fix it?

Whats going on I think is that when the call is made to the function to change the page - the javascript for the Lightbox viewer stops working

Is there a way to make it continue on the next page as well?

AHA!!!! Figured it out :D

The codes above have been adjusted to work now!!

Enjoy the PHP + Lightbox Viewer gallery ladies and gentlemen

[emrys01]

Code:

Code Select Expand


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


not specific to the viewer block, i have to ask... have you ever been able to just dump the includes of prototype.js and scriptaculous.js into index.template.php, and gotten things to work that way?  i have a keen interest in incorporating some DWR tricks into my forum (specifically, allow the server to update portions of the page independently and asynchronously).  in fact, i actually own the scriptaculous and rico portions of DWR.  however, when i throw prototype.js into index.template.php, so that it's always loaded for every page of the site, then i lose the ability to collapse and expand TP blocks.   regular SMF collapse/expands work fine; it's just going through TP's toggle() function that i have a problem.

with the latest prototype.js (1.5.0rc10), when i click a collapse/expand button, the button simply disappears, and the block doesn't change.  and, of course, since the button's now gone, it's not even possible to try again.  i'm using FireBug in FFv1.5.x, and that doesn't even show me any error on that specific action.  (with 1.5.0rc0, i did get an error, and it pointed me in the vicinity of prototype's $() function, but not with any sort of useful error description.)

including prototype.js and scriptaculous.js inside a block is something i hadn't thought of, and maybe it's possible to only include those script tags on particular pages within a forum, so it can probably be worked around, but still, it's really irritating me...  any thoughts?

[akulion]

It shouldnt really be a problem unless there is a conflict with variables used in the scripts I think

But I will give it a try on my test site later on today - as u may have noticed the demo is no longer on my page mainly cos I got a SMF integrated gallery now..but still ill get back to u on this after I try it out on my test site :up:

[emrys01]

great, aku... thanks, i appreciate it!

[5thmsstech]

Loving this lil script. Can anyone tell me how to get it to center on the block?