an7_img

iaian7 · 2007-01-20 07:50:39

Alas, I’ve put off official publication for far too long, and I’m a bit too late to be quite as helpful. A few months ago I was trying to find a good lightbox style plugin, and after testing most of them (including Slimbox) I went with Litebox. Much like Slimbox, it’s built for size and speed, but unlike Slimbox it doesn’t use background settings for the image display (making for a cleaner, though less secure, load experience). Keyboard navigation is easy, and the CSS is a simple set of classes (plus individual image float=”“ controls).

an7_img is a Textpattern plugin used for image insertion and simplified integration of Tyler Mulligan’s Litebox. Textpattern image ids aren’t supported, but using a folder system makes image handling fairly intuitive (and a heck of a lot easier than Textpattern image handling). Nothing fancy, but it does the job.

Visit the site for more information.

Last edited by iaian7 (2007-05-12 05:16:55)

iaian7 · 2007-02-25 06:07:50

an7_img has been updated to version 0.4!

The update includes some error corrections, addition of CSS float controls for all tags, and it now correctly references Textpattern’s article ID for the Litebox gallery set (though you can still define your own).

Read more and get the plugin at Iaian7.com

Last edited by iaian7 (2007-02-25 06:08:17)

sirNemanjapro · 2008-04-05 11:19:14

Is it possible to use jQuery lightBox plugin instead of mootools?

maurovignati · 2008-06-04 12:08:27

hi iaian7,
i’m using your script for a website. i had to modify it a little but i have a problem with the imgdir. this is the test site:

http://vignati.ch/globe-trotter/

The first page is the blog, where the customer put an image for each article, and he will insert manually each photo into the article. this is the function for the blog (it work’s great)

function an7_imgbox($atts) {
	global $thisarticle;
	extract(lAtts(array(
		'dir'	=> '',				// the directory where your image is stored
		'img'	=> '',				// the image file
		'set'	=> 'id',			// gallery set, default is "id", which links to Article ID number
		'alt'	=> '',				// subtitle for the images, default is blank
		'classthumb'	=> 'liteboxthumb',			// class for the thumbnail
		'float'	=> 'none',			// options are left, right, none, and inherit
		'pre'	=> '',				// prepended to the image links (use '/' for a clean URL setup)
	),$atts));
	$imgdir = 'http://vignati.ch/globe-trotter/images/'.$dir.$img;		// adds images/ to the dir path
	$thumbdir = 'http://vignati.ch/globe-trotter/images/'.$dir.$img;	// the subdirectory where thumbnails are stored
if ($set !== 'id')
	$setid = $set;
else
	$setid = $thisarticle['thisid'];
	$size = getimagesize($thumbdir);
	// single image, with thumbnail, placed into the Litebox code and returned
	return '<a href="'.$imgdir.'" rel="lightbox['.$setid.']"><img src="'.$imgdir.'" alt="'.$alt.'" class="'.$classthumb.'" style="float: '.$float.'; "/></a>';
}

the second, http://vignati.ch/globe-trotter/decouvertes, is the link to the image gallery. the customer should upload the image in the right path (via ftp not via image upload of textpattern) and the image will published in the right article. This is the function imgdir

function an7_imgdir($atts) {
    global $thisarticle;
    extract(lAtts(array(
        'dir'    => '',                // the directory where your images are stored
        'set'    => 'id',            // gallery set, default is "id", which links to Article ID number
        'alt'    => '',                // subtitle for the images, default is blank
        'class'    => 'litebox',                // class for the DIV container
        'classthumb'    => 'liteboxthumb',        // class for the DIV container
        'float'    => 'none',            // options are left, right, none, and inherit
        'pre'    => '/',                // prepended to the image links (use '/' for a clean URL setup)
    ),$atts));
    $imgdir = 'http://vignati.ch/globe-trotter/images/'.$dir;        // adds images/ to the dir path
    $thumbdir = 'http://vignati.ch/globe-trotter/images/'.$dir;    // the subdirectory where thumbnails are stored
    $allowed_types = array('png','jpg','jpeg','gif'); // list of filetypes you want to show
    $dimg = opendir($imgdir);         // opens the defined directory
if ($set !== 'id')
    $setid = $set;
else
    $setid = $thisarticle['thisid'];
    while($imgfile = readdir($dimg))
    {
        if(in_array(strtolower(substr($imgfile,-3)),$allowed_types))
        {
            $a_img[] = $imgfile;
            sort($a_img);
            reset ($a_img);
        }
    }
    $totimg = count($a_img);        // total image number
    $thumb_return_string = '';
    for($x=0; $x < $totimg; $x++)
    {
                                    // define image sizes for thumbnails
    $size = getimagesize($thumbdir.''.$a_img[$x]);
                                    // write the Litebox script for each image
    $thumb_return_string = $thumb_return_string . '<a href="'.$pre.$imgdir.''. $a_img[$x].'" rel="lightbox['.$setid.']"><img src="'.$pre.$thumbdir.''.$a_img[$x].'" width="'.$size[0].'" height="'.$size[1].'" alt="'.$alt.'" class="'.$classthumb.'" /></a>';
    }
    return '<div class="'.$class.'" style="float: '.$float.'; ">'.$thumb_return_string.'</div>';
}

The script dosen’t work. there is a problem here , i thinnk:

while($imgfile = readdir($dimg))

There is a problem by the reading the directory, so the resulting $imgfile is empty. Have you an idea about that?

Many thanks for this help
Maruo

iaian7 · 2008-06-17 04:34:49

maurovignati wrote:

i’m using your script for a website. i had to modify it a little but i have a problem with the imgdir.

Double check what you’ve edited. The If/Else section is now missing the { and } elements, and the $alt variable definition has been removed, but not where it was used in the $thumb_return_string (so it’s looking for an unavailable variable). And as a side note, the thumbnail urls, in your current edit, aren’t going to help you much when it comes to using Lightbox style scripts. You’ll need something set up to get you images in a different directory than the primary one (otherwise you’ll be clicking fullsize images to view them… full size).

sirNemanjapro wrote:

Is it possible to use jQuery lightBox plugin instead of mootools?

Absolutely! Any script that uses the rel=“lightbox[set]” format will work just fine.

Textpattern CMS

Textpattern CMS support forum

#1 2007-01-20 07:50:39

an7_img

#2 2007-02-25 06:07:50

Re: an7_img

#3 2008-04-05 11:19:14

Re: an7_img

#4 2008-06-04 12:08:27

Re: an7_img

#5 2008-06-17 04:34:49

Re: an7_img

Board footer