Mini gallery/slideshow with PHP and JQuery

Sometimes I’ve had to quickly put in a page a simple slideshow, the first times I’ve searched a lot around…

December 13, 2009

Sometimes I’ve had to quickly put in a page a simple slideshow, the first times I’ve searched a lot around for a small gallery, but finally I’ve decided that the best way is to do it by myself. This because every complex and very nice gallery that I’ve found need to be studied to make them work as you want, and sometimes they have complex css to integrate or php code to put in the correct directory… I think that many times we all just need a simple php that read a dir, and pass images array to a stupid slideshow.

If you already have JQuery in your pages this gallery is really fast, it works with this small PHP function that find images:

/*
    this php function read all the jpg/gif/png files in the specifed
    directory and return a string with the names
*/
function getJsArray($dir) {
	$out = "";
	if ($dh = opendir($dir)) {
		while (($file = readdir($dh)) !== false)
			if(in_array( substr(strrchr($file, '.'), 1) , array('gif','png','jpg') ))
				$out.= ($out?",":"")."'".$dir.$file."'";
		closedir($dh);
	} else { die ("no dir"); }
	return $out;
}

And uses this tiny javascript (the first lines are for configuration, they also call the php function on the server to read images files):

//---------------------------------------------
var gallery_current_pos = 0;			// gallery counter position
var gallery_idname = "container";		// id of the gallery container
var gallery_timer = 5000;			// 5 seconds
var gallery_ar = Array(<?=getJsArray("./minislides/")?>);

function goGallery() {
	if (gallery_current_pos>gallery_ar.length - 1) gallery_current_pos =0;
	$('#'+gallery_idname).fadeTo("fast", 0 , function () {
		$('#'+gallery_idname).css("background-image","url(" + gallery_ar[gallery_current_pos] + ")");	
		$('#'+gallery_idname).fadeTo("slow", 1);
		gallery_current_pos++;
	});
	if (gallery_ar.length>1) setTimeout(	function () { goGallery(); }, gallery_timer);
}
//---------------------------------------------

The “container” which will show the images is simply a “div” with some defined dimensions declared with css, and the javascript will change its background to show images.

When the page is loaded simply call the function to start gallery.

Watch demo. Watch source.

Author

I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of Rockit.it and Dailybest.it and I'm actually the Chief Technical Officer of Better Days web agency.

Comments on “Mini gallery/slideshow with PHP and JQuery”

One thought

  1. I’m having a little bit of trouble viewing your site in Safari, but it may just be my computer. Apart from that, I love your site. I plan on browsing around and reading some more posts!

Comments are closed

Recommended

Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

April 20, 2016

How to write a text description into html input type password

Sometime designers put form labels and instrucions into html inputs. One of the common uses is for login boxes when…

March 10, 2010

Set “write here” on input type text?

If you are using JQuery framework and you want to set up the default value of some text box in…

November 17, 2009

Add Internet Explorer class to body to detect old browser

When you have clients that still uses an old browser, you need to handle it. This javascript function detects the…

February 27, 2017

Limit the number of categories for posts in WordPress

CHOOSE ONLY ONE CATEGORY WORDPRESS If you need to limit the number of categories used by the authors of your…

September 14, 2015

Scraping content with PHP as if it was jQuery

Building a spider or a bot needs some knowledge of regular expressions, you must know and use preg_match or preg_match_all…

December 8, 2013