Image Gallery Tutorial Using Hoverbox A php solution to coding the Hoverbox Image Gallery

[jlhaslip 4]

As reported in another posting, there is an Image Gallery named Hoverbox from the Sonspring site which is a pretty cool display method using CSS to have Thumbnail pictures double their size by hovering over them.

 

I liked the css included in the original Tutorial as found on the Sonspring site, but I knew there was more than one use for the Hoverbox and took it upon myself to explore the use of the Hoverbox on a site I webmaster.

One thing that wasn't right was having to hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by reading the Image filenames from the Image folder and inserting them into the html.Another was the use of the anchor (<a>) tag to trick Internet Explorer into activating the on-hover event, so I included the filename as the target of the anchor tag so that the on-click event actually does something. It opens a window and displays the full sized picture in your browser.The website I wanted to use the Image Gallery on is for a Minor Hockey program and I also wanted a 'randomization' of the pictures so that each time you viewed the page a different selection of pictures was displayed. This avoids the possibility of suspicious selection methods (Why isn't little Johnny's picture on the site?)and lastly, I wanted this code to be flexible in terms of the number of pictures displayed on the page, so I have a 'maximum number' variable which displays, well, a maximum number of pictures. This raised the possibilty of there not being enough Images, so a check is made to display the lesser of the max_num or actual_num of pictures.

I leave it to you to visit the Sonspring site to check out the actual Hoverbox code. In this Tutorial, I will focus on the php coding for the Hoverbox which my script enhances as per the list of features above.

 

// Hoverbox Image Gallery - adapted//// Original Hoverbox code by Nathan Smith // 
[url="http://sonspring.com/journal/hoverbox-image-gallery"]
http://sonspring.com/journal/hoverbox-image-gallery[/url]////'>http://sonspring.com/journal/hoverbox-image-gallery[/url]//// PHP script adaptation by Jim Haslip jlhaslip@yahoo.ca//// A main feature in the original Hoverbox was a method for the thumbnail // Images to grow to double the thumbnail size when hovered over. // The Hoverbox swap of Images is entirely CSS-based. No javascript was injured in // the making of this display.//// Added in this script are ://	- an on-click event to display the Images full size//	  - added the php scripting to load the contents from a directory// 	- added a max number of images to be displayed// 	- added a random feature for selecting the Images to be displayed//// There could be several versions adapted from this script. ie: remove the full size // on-click feature, change the maximum number to display, remove the randomness. // I will eventually have each of these versions available, but at present, // you will have to Mod the script yourself. // // //<?phpecho '<ul class="hoverbox">';//// set some variables used in the script//$max_num = 15;   // maximum images displayed in the Hoverbox$j=0;			// a counter variable$narray = array();   // declare an array containing the file-names of the images//// set directory paths here.// There are Bandwidth issues with loading the 'full-size' pictures for use as thumbs // and mid-size, however, there is a time-delay issue on-click when the full-size // picture must then be downloaded. Your call on that one. The Demo uses three Folders.// To minimize the bandwidth usage, use only one directory of optimized pictures, // but be sure to alter the paths accordingly.// All occurences of a picture MUST have the SAME NAME whether in one or three directories.// The filenames don't appear to be case-sensitive. ( PIC001 = pic001 = PiC001 = pIc001 )//$dir = "images/";			  // name of the folder where the Thumbnail images are stored$mid_dir = "mid_images/";	  // name of the folder where the Mid-sized images are stored$full_dir = "full_images/";	// name of the folder where the Full-sized images are stored//// check to confirm the directories exist and can be opened//if (is_dir($dir) && (is_dir($mid_dir)) && (is_dir($full_dir)) ) {   $dh= @opendir($dir) or die("Unable to open $path please notify the administrator. Thank you.");	//   // loop while you read the entire directory listing selecting only files which   // 1. are not the * or (..) directories   // 2. are jpeg ( or as specified in the file type below )   // 3. exist in both the mid-size and full-size directories named in the path variables   //   while (($file = readdir($dh)) !== false) {   	//   	// ignore the directory entries and only select the .jpg file extension files   	// alter the '.jpg' to suit your format   	//   	if (($file != '.') &&  ($file != '..') && (stristr($file,'.jpg'))) {		   //		  // confirm the file exists in both the mid and full directories		  //   		  if ((file_exists($mid_dir . $file)) && (file_exists($full_dir . $file))) {			  //			  // add them to an array if all is good so far			  //		  $narray[]=$file;		  //		  // increase counter when a file is added to the array		  //		  $n++;		  }	 }   }//// reset the max_num if not enough pictures meet the criteria//if ($n < $max_num) {	$max_num = $n;	}//// randomize the array for presentation//shuffle( $narray);//// echo the correct html as per the Hoverbox Tutorial found at // [url="http://sonspring.com/journal/hoverbox-image-gallery"]http://sonspring.com/  while ( $j <= $max_num-1) {	echo "t" . '<li><a href="' . $full_dir . $narray[$j] . '" alt="full-size">				<img src="' . $dir . $narray[$j] . '" alt="' . $dir . $narray[$j] . '" >				<img src="' . $mid_dir . $narray[$j] . '" alt="mid-size" class="preview" /></a></li> ' . "nrt";	 $j++;  }}   	 	  //   	 	  // report an error on the directory confirmation   	 	  //		else {	echo 'There is a problem with the directories. Please Notify the Administrator. Thank You.';}		closedir($dh);echo   '</ul>';?>

Edited December 17, 2016 by OpaQue (see edit history)

[jlhaslip 4]

I created this Tutorial several days ago, but the codebox information was getting a weird control character inside it which wouldn't let the contents display correctly.It may have been something to do with the editting and transfer of the text to/from a mac machine and then to the Linux server, although I have done it that way before, so go figure?Enjoy.

[hype 0]

There is something strange about the image hover stuff... It seems that the image hovering isnt welly shown, with the other image thumbnail blocking the parts of the hovering image, it really spoils the image view of it... Could that part be fixed?

[Sprnknwn 0]

Thanks. The Hoverbox Image Gallery is very interesting itself but the changes you?ve made arepretty good and improve the results. I want to make use of this, maybe I?ll do a little website with a few images to check it out.

[FLaKes 0]

Great tutorial! I was going to need something like this in the next few weeks, I had already thought of how I was going to do it, even though it seems like my work is done, Im still going to do it bymyself and in the end I will compare and see if its as goos as the hoverbox. Thanks for sharing

[jlhaslip 4]

HYpe,Either I don't understand the problem you are having, or I can't duplicate it.I have checked this script with three browsers and two versions of php and it all works well for me.Only thing that I can't check is the function in Internet Explorer 7 because I do not have that Browser installed. What browser are you using? Please post it here or pm me and I will see what can be done. Thanks.Sprnknwn and Flakes,Thanks for your comments and good luck with it.

[sylenzednuke 0]

I needed something like this and found some rather odd ones on CSSPlay, anyways, very nice gallery and I will surely use it on my website soon.Thanks Jhaslip.

[hype 0]

I'm using IE7.0, perhaps that's the problem... I'll have a little try on my FireFix browser and see if there's any prob...

Here's a screenshot of the problem I encounter, the hover doesnt really stand out from other pictures, and get cover by the thumbnail of others...

http://forums.xisto.com/no_longer_exists/404.png

Edited September 20, 2006 by hype (see edit history)

[DarkPsycho 0]

yea i just tried it on my IE7 and it is exactly like his screenie.although i think IE7 is still in its beta stages so it might be fixed when the final comes out (although knowing past IE's it might not be)

[jlhaslip 4]

Thanks for the screenshot, HYpe and the confirmation, DarkPsycho.I will definately look into this problem. It is probably something to do with an IE6 hack and IE7 that doesn't need the hack. Usually, this can be solved by using a conditional statement for IE and different CSS file for those browsers which need it.Stay tuned for the modifications to come.*by the way*, does the 'on-click' okay work in IE7?

[hype 0]

I believe it does work... When I click on the thumbnail, it brings me to the full size page of the particular image... Lets hope the IE team fixed it... Perhaps I'll drop by the connect webpage of Microsoft and drop in a bug report or feedback on the IE7.0 beta section...I dont really know what's the main problem with this script that allows IE7.0 to display it incorrectly but could someone explain further which is the main problem causing it so I can post up a bug report and the production team may solve it...

Edited September 20, 2006 by hype (see edit history)

[jlhaslip 4]

Hype,Don't worry about anything. I am sure that IE knows all about the problems with IE's non-standard rendering of CSS. They are in the middle of fixing it, so relax. The only fix is for me to have some time to research the CSS and I simply do not have the time until probably this weekend. I promise to get to it and advise you when it is available for testing and you can do the beta test for me.

[hype 0]

Ok, thanks... Is it possible to create a catergory feature where we can group those pictures into different catergory and then perhaps the catergory shows some of the thumbnail of the pictures inside the catergory, that would be perfect... I'm looking foward to it, hope it will work like wonders lol...

btw, the actual hoverbox image gallery from the sonspring site did not have a problem with that css thing and it works perfectly with IE7.0...

http://host.sonspring.com/hoverbox/

Edited September 21, 2006 by hype (see edit history)

[jlhaslip 4]

Here is a link to a gallery of paintings which a local student has on display at an Art Gallery.

I built a web page for him using the Hoverbox Gallery php script above.

http://forums.xisto.com/no_longer_exists/

Any and all comments are appreciated.

[matak 2]

If you want to run IE7, and IE6 on machine to test your sites you can use Standalone Edition. Maybe you can google for even better link for DL.