Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Pages: [1] 2

Author Topic: Image Gallery  (Read 10898 times)

ionednarti

  • Newbie
  • *
  • Karma: 0
  • Posts: 5
Image Gallery
« on: May 18, 2008, 09:53:27 AM »

Hi all. By default in sNews we have only the "image by URL" function. I would like to see mod helping to organize a simple gallery. Like we upload (using ftp or whatever) 10 pictures and then want to add them after the text in the article. Also with click-to-zoom option. Is there any mod or addon like this?

p.s.: i was working with Joomla before and used dynamicimage and mosimage plugins there if it make sense...

Thanks!
Logged

brauck

  • Hero Member
  • *****
  • Karma: 18
  • Posts: 556
    • http://www.hbw-webdesign.nl/
Re: Image Gallery
« Reply #1 on: May 18, 2008, 01:45:48 PM »

Use the search function and y'll find a lot of posts about this issue.  ;)
Logged
Confidence is reduced complexity.
brauck.nl for free css templates

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Image Gallery
« Reply #2 on: May 18, 2008, 02:12:00 PM »

Hi all. By default in sNews we have only the "image by URL" function. I would like to see mod helping to organize a simple gallery. Like we upload (using ftp or whatever) 10 pictures and then want to add them after the text in the article. Also with click-to-zoom option. Is there any mod or addon like this?

p.s.: i was working with Joomla before and used dynamicimage and mosimage plugins there if it make sense...

Thanks!
Well, well, well...
As it happens, I am working on something very much like this, where you can have a 'gallery for an article'
But, I'm doing it for 1.7, and it is nowhere near complete as yet.

Anticipated functionality...
-in admin article customise, checkbox to enable gallery for article.
-- gallery directory made according to article ID
-- gallery admin enabled in article admin
--- upload of images, description, and title can be set after images are uploaded.
--- deleting article will place gallery in orphan directory, and will still be available without having associated article
--- also a delete gallery option also includes destroying the images as well.
-means of creating a Gallery page (using insert function), which will show all gallery links. Those within articles will be links to the articles, those that are orphaned will be links to the gallery only.
-in general view, thumbnails will be displayed below article text as (currently) links to full size image.

still a work in progress, an not much of it is currently fuly operational.
as a teaser, http://www.fiddlenfly.com/download/article_gallery_teaser.png
« Last Edit: May 18, 2008, 02:23:47 PM by philmoz »
Logged
Of all the things I have lost, it is my mind that I miss the most.

funlw65

  • Hero Member
  • *****
  • Karma: 96
  • Posts: 771
    • Country Lab
Re: Image Gallery
« Reply #3 on: May 18, 2008, 05:00:43 PM »

Hmm, an awaited gallery for your site Sir, with your flying skills ;D .
Is something which I wanted(different area, of course) for another site of one of Seniors around here :P
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Image Gallery
« Reply #4 on: May 18, 2008, 08:49:46 PM »

Well, well, well...
As it happens, I am working on something very much like this, where you can have a 'gallery for an article'
But, I'm doing it for 1.7, and it is nowhere near complete as yet.

Here's a new expectation... that it will be fairly easy to adapt this new "Article Gallery" addon to run with 1.6... and that it can be applied to pages as well as it is to articles.  ;D
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Image Gallery
« Reply #5 on: May 18, 2008, 10:19:58 PM »

Yes, can be applied to pages, and should be easily converted to 1.6.
I'm writing it as one function using switch/case, so install into snews.php is just a matter of ... echo gallery(x) where x is a different case.
Logged
Of all the things I have lost, it is my mind that I miss the most.

djoey

  • Newbie
  • *
  • Karma: 0
  • Posts: 19
Re: Image Gallery
« Reply #6 on: July 03, 2008, 02:08:32 PM »

Hi,

Any news on this addon, because i was looking into some options as well, creating something similar. But that work would be a waste of time if somebody else already has a working version vor 1.6, and 1.7
Logged

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Image Gallery
« Reply #7 on: July 05, 2008, 11:21:49 AM »

Hi,

Any news on this addon, because i was looking into some options as well, creating something similar. But that work would be a waste of time if somebody else already has a working version vor 1.6, and 1.7
Still working on it.
Am having some issues with image manipulation, uploading and I keep revamping and rethinking aproach, making changes that break other bits -- but am getting there.
[gallery will have main images, small thumbs, and medium thumbs. the medium thumbs are only going to be created if requested in the admin area, and are the ones that would be used to illustrate the article text. The html code for the medium thumb will be displayed in admin, so it will be simple copy/paste and edit (for float left/right css)]

... and life seems to be sticking it's ugly head in and demanding some attention ..  :P
« Last Edit: July 05, 2008, 11:24:16 AM by philmoz »
Logged
Of all the things I have lost, it is my mind that I miss the most.

Rui Mendes

  • Development,Testing, Support
  • Hero Member
  • *****
  • Karma: 195
  • Posts: 1009
  • sNews1.7
    • Comunidade Portuguesa
Re: Image Gallery
« Reply #8 on: July 05, 2008, 01:27:35 PM »

I'm so Sorry I'm been so busy.

There are 2 projects:
- Phil
- Rui

My project has many versions very soon will be available:
- First project available : Basic (light version)

- Next works:
sNews Gallery Basic+Lightbox
sNews Gallery Basic+Thickbox
sNews Gallery Basic+Highslide
sNews Gallery Basic+Glider
Others. Do you know more scripts? tell me please

sNews Gallery Basic+Comments+Password (This was the first project), I must rewrite code again.
Logged
Need a Job on Europe. Linkdin - Facebook / Group

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Image Gallery
« Reply #9 on: July 06, 2008, 01:23:27 AM »

I am looking forward to your project Rui... to add to my curent MEMU+++ package.  ;D

I notice you have multiple upload fields in your "Upload Images" panel... this would be nice to have added to the default sNews Files Upload panel too.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

funlw65

  • Hero Member
  • *****
  • Karma: 96
  • Posts: 771
    • Country Lab
Re: Image Gallery
« Reply #10 on: July 06, 2008, 01:26:39 AM »

Mamma mia! Rui. this looks great! I see is a basic sNews (normal pages/categories/articles) with integrated gallery(albums as categories containing images as articles)?

We will have a list of albums as is for categories in sidebar? separated from normal categories list (coexisting) ? And a list of recent uploaded images?
Logged

Rui Mendes

  • Development,Testing, Support
  • Hero Member
  • *****
  • Karma: 195
  • Posts: 1009
  • sNews1.7
    • Comunidade Portuguesa
Re: Image Gallery
« Reply #11 on: July 06, 2008, 08:29:34 AM »

I am looking forward to your project Rui... to add to my curent MEMU+++ package.  ;D

I notice you have multiple upload fields in your "Upload Images" panel... this would be nice to have added to the default sNews Files Upload panel too.

Thanks Doug. Yes can be done in snews 1.7 or create new mod. We will see it, soon.

Mamma mia! Rui. this looks great! I see is a basic sNews (normal pages/categories/articles) with integrated gallery(albums as categories containing images as articles)?

We will have a list of albums as is for categories in sidebar? separated from normal categories list (coexisting) ? And a list of recent uploaded images?

Thanks Fun.
With this Basic version (I'll put Demo this week) you have only galleries not albums.
With Albums+comments+Password is the next version

Features:
- Create create gallery/edit/delete
- Choose Place (Category/Pages) to Galleries List
- Gallery (your photos) can be enabled to "one article" or  "all articles". Inside the article you can insert one image or entire gallery
- Visible option to Gallery's List
- Extract information from image (Exif function: focus, apperture, etc).
- Edit information from your photos.
- Upload one zip file and extracts automatically to the gallery
- Rescan option to find new images, if you a ftp client

Adding Lightbox scipt is so simple, I tried yesterday. Works like a charm
Logged
Need a Job on Europe. Linkdin - Facebook / Group

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Image Gallery
« Reply #12 on: July 06, 2008, 02:37:21 PM »

looks like I had better pull out the proverbial finger, and produce something ;)
(mind you, I'm using Rui's older code as a basis -- why reinvent the wheel, when you can paint the tyres)
Logged
Of all the things I have lost, it is my mind that I miss the most.

djoey

  • Newbie
  • *
  • Karma: 0
  • Posts: 19
Re: Image Gallery
« Reply #13 on: July 12, 2008, 11:52:49 PM »

Hmm you guys already seem to be doing a good job :) I will still have a look to see if I can cook up something.
Hmm yeah life is demanding ey ? :D
Logged

djoey

  • Newbie
  • *
  • Karma: 0
  • Posts: 19
Re: Image Gallery
« Reply #14 on: August 28, 2008, 09:40:52 PM »

Okay i'm getting there.

http://heliodor.nl/fotoalbum.php (demo on a live site)

It's still very basic, i have created this one with the litebox plugin. But firstly it was created without it, i commented an entire section so it can also work without the plugin and thus on systems without javascript enabled.
It has multiple subdirectory support, the script will look in a specific "home" folder and from there downwards. It will automatically create thumbs with GD2.
Only thing because i was too lazy i entirely commented every bit in dutch.. :P but i'll share the code with you guys anyways maybe it is of good use for someone.

[edit] will translate it in English including variables and array's etc.. [/edit]
[edit2]Translated All comments... just to give you a better idea on what to expect where.. Too lazy to do the variables now :)[/edit2]

The only thing to do now is integrate it with snews, and a little administrable backend with uploading pics etc.. But that is something that i'm working on :-)
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen"/>
<script type="text/javascript" src="js/prototype.lite.js"></script>

<script type="text/javascript" src="js/moo.fx.js"></script>

<script type="text/javascript" src="js/litebox-1.0.js"></script>
<title>Test Album</title>
</head>

<body onload="initLightbox()">
<?php



// We will create 2 array's one for the files and one for the director(ies) We also define the "home" folder where the script should search for pictures.

$directories     = array();

$bestanden       = array();

$map             'fotoalbum/';



//A Few variables that with which you can adjust the sizes of the small and larger thumbs that are created.

$hoogte_klein     100;  //height

$breedte_klein     100//width



$hoogte_groot     400;   //height

$breedte_groot     580;  // width


//The amount of small thumbs you wish to see per page, before it will create a new page.

$afbeeldingenperpagina    25;



//function, for cleaning up the array's

function arraySchoonmaken($array) {

   foreach (
$array as $index => $value) {

       if (empty(
$value)) unset($array[$index]);

   }

   return 
$array;

}



//function, for creating the thumbs

function thumbnail($map,$thumblocatie,$bestandsnaam,$breedte,$hoogte)

{

    list(
$breedte_origineel$hoogte_origineel$type) = getimagesize($map.$bestandsnaam);



    
//We know the widht and height of the image, and we know how large the need to get, so we will calculate!

    
if (($breedte_origineel $hoogte_origineel) && ($breedte $hoogte)) {

        
$breedte = ($hoogte $hoogte_origineel) * $breedte_origineel;

    }else{

        
$hoogte = ($breedte $breedte_origineel) * $hoogte_origineel;

    }

    

    
// Create a new image with the correct width and height, open the original and use the functions imagecopyresampled to create a nice thumb.

    
$afbeelding imagecreatetruecolor($breedte$hoogte);

    

    switch (
$type

    {

        case 
1:

            
//gif

            
$afbeelding_origineel imagecreatefromgif($map.$bestandsnaam);

            
imagecopyresampled($afbeelding$afbeelding_origineel0000$breedte$hoogte$breedte_origineel$hoogte_origineel);

            
imagegif($afbeelding$map.$thumblocatie.$bestandsnaam);

            break;

        case 
2:

            
//jpg

            
$afbeelding_origineel imagecreatefromjpeg($map.$bestandsnaam);

            
imagecopyresampled($afbeelding$afbeelding_origineel0000$breedte$hoogte$breedte_origineel$hoogte_origineel);

            
imagejpeg($afbeelding$map.$thumblocatie.$bestandsnaam,80);

            break;

        case 
3:

            
//png

            
$afbeelding_origineel imagecreatefrompng($map.$bestandsnaam);

            
imagecopyresampled($afbeelding$afbeelding_origineel0000$breedte$hoogte$breedte_origineel$hoogte_origineel);

            
imagepng($afbeelding$map.$thumblocatie.$bestandsnaam);

            break;

    }   

}



//If a map has been given in the $_GET parameter we will check if it is empty and take care of any abuse of the script.

if(isset($_GET['map']) && !empty($_GET['map']))

{

    
$map str_replace(array(".""\\"":"), " "$_GET['map']).'/'

}



//We will pull apart the $_GET variable so we have all the directories in the array.

$mappen arraySchoonmaken(explode('/'$map));

$aantal count($mappen)+1;



if(
$mappen[0] != 'fotoalbum')

{

    echo 
'Cut it out! youre killing it!';

    exit();

}



// This is the part not even I get.. but it works, yeah yeah i kinda lend this part from another script ;)

for($z 1$z $aantal$z++)

{

    
$temp NULL;

    for(
$y 0$y $z$y++)

    {

        if(
$mappen[$y] == 'fotoalbum')

        {

            
$temp .= $mappen[$y];

        }else{

            
$temp .= '/'.$mappen[$y];

        }

    }

    echo 
' >> <a href="?map='.$temp.'">'.ucfirst($mappen[$z-1]).'</a>';
}



echo 
'<hr>';



// Now we open the directory and read it file by file.

if(@$dir opendir($map))

{

    while (
false !== ($file readdir($dir)))

    {

//We lose the . and the .. because we don't want em..

        
if ($file != "." && $file != "..")

        {

    //If $file is indeed a file...

            
if(is_file($map.$file))

            {

// we retrieve the extension and check if it is actually an image extension we support.

                
$bestandsgegevens     getimagesize($map.$file);

                
$extensie             $bestandsgegevens['mime'];

            

                if(
$extensie == 'image/jpeg' || $extensie == 'image/gif' || $extensie == 'image/png')

                {

    //Add it to the array!

                    
$bestanden[] = $file;

                }                        

            }

                

    //If $file is a directory...

            
if(is_dir($map.$file))

            {

//we first check if it isn't our thumbs or thumbsgroot (big) directory

                
if($file != 'thumbs' && $file != 'thumbsgroot' && $file != 'Geheim')

                {

    //And then we add it to the directories array!

                    
$directories[] = $file;

                }                

            }

        } 

    }

    
closedir($dir);

}else{

    
//What are you doing! Youre killing it, Call 911 !!!11111oneoneone

    
echo 'Sorry, can\'t open this directorie!';

}



//If the directories array isn't empty we wil first show it, so the people can actually click it!

if(!empty($directories))

{

    foreach(
$directories as $directory)

    {

        echo 
'<a href="?map='.$map.$directory.'">'.ucfirst($directory).'</a><br>';
    }

    echo 
'<hr>';

}



//If someone isn't just trying to get only one picture we will show the thumbs..

if(!isset($_GET['foto']))

{

    if(!empty(
$bestanden))

    {

        if(isset(
$_GET['paginanr']))

        {

            if(
is_numeric($_GET['paginanr']))

            {

                
$paginanr $_GET['paginanr'];

            }

        }else{

            
$paginanr 0;

        }

        

        
$aantalfotos count($bestanden);

        

// When there are more than the set amount of pictures we will create a next / previous link

        
if($aantalfotos $afbeeldingenperpagina)

        {

            echo 
'<div style="text-align: center; margin: 10px;">';

            

    //Do we need the previous link?

            
if ($paginanr 0)

            {

                echo 
'<a href="?paginanr='.($paginanr 1).'&amp;map='.substr_replace($map,"",-1).'" title="Go to page '.($paginanr).'">&lt;&lt; Previous</a>';

            }else{

                echo 
'&lt;&lt; Previous';

            }

    

    // Just because we can we will show you on which page we are, and how many there are in total

            
echo '&nbsp;&nbsp;&nbsp; Page '.ceil($paginanr+1).' of '.ceil($aantalfotos/$afbeeldingenperpagina).' &nbsp;&nbsp;&nbsp;';

        

    //Do we need the Next button?

            
if ($paginanr floor(($aantalfotos -1)/$afbeeldingenperpagina))

            {

                echo 
'<a href="?paginanr='.($paginanr 1).'&amp;map='.substr_replace($map,"",-1).'" title="Go to page '.($paginanr 2).'">Next &gt;&gt;</a><br>';

            }else{

                echo 
'Next &gt;&gt;<br>';

            }     

                

            echo 
'</div>';

        }

                

// Dont't ask higher mathmatics needed for this one, but it works, and that is the general idea

        
for($fotonr = ($paginanr $afbeeldingenperpagina); $fotonr <= ($paginanr $afbeeldingenperpagina) + ($afbeeldingenperpagina) -&& $fotonr count($bestanden); $fotonr += 1)

        {

    //Okay.. what if there is no thumbs directorie?

            
if(!is_dir($map.'thumbs/'))

            {

                
//We will create it for you ofcourse!, including the correct chmod just in case your hosting provider is too picky on its security..

                
mkdir($map.'thumbs/',0777);

            }

            

            
//Okay... what if there is no thumbnail from an original picture?

            
if(!file_exists($map.'thumbs/'.$bestanden[$fotonr]))

            {

                
//Create it then?

                
thumbnail($map,'thumbs/'$bestanden[$fotonr],$breedte_klein,$hoogte_klein);

            }

            

            
//The thumbnail exists, what to do what to do..

            
if(file_exists($map.'thumbs/'.$bestanden[$fotonr]))

            {     
// you have guessed it right, we will show em! now here is the tricky litebox part.

//uncomment this and comment the below echo line to work without litebox.
//echo '<a href="?map='.substr_replace($map,"",-1).'&amp;foto='.($fotonr+1).'" style="border: 0px;"><img src="'.$map.'thumbs/'.$bestanden[$fotonr].'" class="thumbs"></a>';

//uncomment this and comment the above echo line to work with litebox.
                
echo '<a href="'.$map.$bestanden[$fotonr].'" style="border: 0px;" rel="lightbox[example]"><img src="'.$map.'thumbs/'.$bestanden[$fotonr].'" class="thumbs"></a>';    

//A little WIP to get the size from the original picture, and place it under the thumbs clickable..

//$afmeeting = getimagesize($map.$bestanden[$fotonr]);

//echo '<br><br><a href="'.$map.$bestanden[$fotonr].'" rel="lightbox[example]">Origineel ('.$afmeeting[0].' x '.$afmeeting[1].')</a></div>';

            
}

        }

    }else{

        
//Clearly the directory is empty.

        
if(empty($directories))

        {

            echo 
'<p>Sorry, this directory is empty !</p>';

        }

    }

}else{

    
//This is the part that needs uncommenting if you want to use the script without litebox.

/*    if(is_numeric($_GET['foto']))

    {

        $fotonr = $_GET['foto'] -1;

        

        if(@is_file($map.$bestanden[$fotonr]))

        {

            echo '<div style="text-align: center; margin: 10px;">';

            

            if ($fotonr > 0)

            {

                echo '<a href="?map='.substr_replace($map,"",-1).'&amp;foto='.$fotonr.'" title="Ga naar foto '.$fotonr.'">&lt;&lt; Vorige</a>';

            }else{

                echo '&lt;&lt; Vorige';

            }

    

            echo '&nbsp;&nbsp;&nbsp;Foto '.($fotonr+1).' van '.count($bestanden).'&nbsp;&nbsp;&nbsp;';

        

            if ($fotonr < count($bestanden) -1)

            {

                echo '<a href="?map='.substr_replace($map,"",-1).'&amp;foto='.($fotonr+2).'" title="Ga naar foto '.($fotonr+2).'">Volgende &gt;&gt;</a><br>';

            }else{

                echo 'Volgende &gt;&gt;<br>';

            }     

            

            echo '</div>';

            

            //If the directory doesn't exist create it please..

            if(!is_dir($map.'thumbsgroot/'))

            {

                    mkdir($map.'thumbsgroot/',0777);

            }

            

            //If the big thumbnail doesn't exist we want you to create it..

            if(!file_exists($map.'thumbsgroot/'.$bestanden[$fotonr]))

            {

                thumbnail($map,'thumbsgroot/', $bestanden[$fotonr],$hoogte_groot,$hoogte_groot);

            }

            

            //So the big thumbnail exists! Show me the money.

            if(file_exists($map.'thumbsgroot/'.$bestanden[$fotonr]))

            {

                echo '<div style="text-align: center;"><a href="'.$map.$bestanden[$fotonr].'" style="border: 0px;"><img src="'.$map.'thumbsgroot/'.$bestanden[$fotonr].'" class="groot" title="'.$bestanden[$fotonr].'"></a>';    

                $afmeeting = getimagesize($map.$bestanden[$fotonr]);

                echo '<br><br><a href="'.$map.$bestanden[$fotonr].'" rel="lightbox[example]">Origineel ('.$afmeeting[0].' x '.$afmeeting[1].')</a></div>';

            }

        }else{ */

            
echo '<p>Sorry, this picture doesn\'t exist!</p>';
//And this too if you want to work without litebox.

     /*   }    

      }*/

}

?>

</body>
</html>
« Last Edit: August 28, 2008, 10:38:33 PM by djoey »
Logged
Pages: [1] 2