Articles tagged with: slideshow

Dynamic Nav Bar Based on Files in Folder

on Wednesday, 12 October 2011. Posted in All

Get the source code
$1.99

Includes working php source code with images, style sheet and javascript.

Thie php script automatically generates a navigation menu based on the pages in the same directory.

The php script does the following:


  • Loops through all the files in the directory looking for php, html and htm files
  • Uses the PHP Simple HTML DOM Parser to find the page h2 title with id="maintitle"
    Note: you can set it to find any tag on the page
  • It stores the page title and the page URL
  • It alphabetizes the pages and displays the into a <li> list
  • Using jQuery the current <li> item class is set to "active"

Demo uses a modified version of a free template from CSS Heaven


Also made the loopedslider dynamic so it dynamically grabs all the images in the slideshow directory and reads the image metadata for the title and text.


demo


In order for the example to work below you will need to add the following code to each of your web pages. This is what the script looks for and makes it the text part of the sidebar links

 
  <h2 id="maintitle">Your Title</h2>
 

Here is the auto navigation script. I recommend putting it into an include file on all your pages.

auto_navigation.php
<!--
//----------------------------------------------------
// Auto Navigation Scripts
// Created by Jaz Witham (Jazzerup)
// 2011
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND
// Script reads the php, htm and html files in a directory
// and builds a navigation bar.
//----------------------------------------------------
-->
<?php
include 'simple_html_dom.php';
 
//Webite URL to that current directory
$dirURL =  dirname("http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']);
 
//get the current folder you are in
$dirpath = getcwd();
 
$folder = opendir($dirpath);
$file_types = array("php", "htm", "html");
$index = array();
$filelist = array();
 
//Loop through the files in the directory
while ($file = readdir ($folder)) {
  if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$file_types))
      {                   
    $html = file_get_html("$dirpath/$file");
  //Checking for a homepage so it always displays first int he list and is not alphabetized with the rest of the files.
  if ($file == "index.php"){
    //$homepgtime = $html->find('h2[id=maintitle]',0)->plaintext;
    $homepgtime = "Home";    
  }else{    
    $filelist[] = array('mytitle' => $html->find('h2[id=maintitle]',0)->plaintext, 'mypath' => $dirURL . "/" . $file);
  }
    }
}
 
//array to sort a 2-dimentional array
function array_qsort2 (&$array, $column=0, $order="ASC") {
  $oper = ($order == "ASC")?">":"<"; 
  if(!is_array($array)) return;
  usort($array, create_function('$a,$b',"return (\$a['$column'] $oper \$b['$column']);")); 
  reset($array);
}
array_qsort2($filelist, "mytitle", "ASC");
 
//Build the <li> list.  The homepage always listed first
echo "<li><a href='index.php' accesskey='1'>$homepgtime</a></li>";
 
$j = 1;
//Loop through the rest of the files
for($i=0; $i<sizeof($filelist); $i++) {
$j = $j + 1;  
  echo "<li><a href='" . $filelist[$i]['mypath'] . "' accesskey='$j'>" .$filelist[$i]['mytitle'] . "</a></li>";
  }
//clean up
closedir($folder);
 
?>
 
 



This jQuery will add the "active" class to the current item in your navigation

 
<script type="text/javascript">
$(document).ready(function(){     
  var str = $("#maintitle").text();    
  $('.nav').children().each(function(){
  if (str == $(this).text()) {
    $(this).addClass('active');
  } else { 
    $(this).removeClass('active') }
  });
});
</script>
 

jQuery Carousel - Images From Folder

on Tuesday, 11 October 2011. Posted in All, Slideshow

Get the source code
$1.99

Includes working source code with images, style sheet and javascript.

One of my favorite free jquery slideshow scripts is Jquery Carousel Lite

The major problem I had with the script is everytime I wanted to add another picture to the slideshow, I had to modify the jquery code to include that image. I wrote a script that will do the following:


1) Automatically lists the image files inside a directory and load them into your jquery carousel.


2) Reads the picture metadata and adds it to the jquery carousel script


  • Metadata: Title becomes the Image Alt Tag
  • Metadata: Subject becomes the Image Link URL
  • Metadata: Comments becomes the Caption

demo


carouselexample.php
//----------------------------------------------------
// jQuery Carousel Enhancement
// Created by Jaz Witham (Jazzerup)
// 2011
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND
// Script reads the image files and 
// image metadata into the jQuery Carousel Script
//----------------------------------------------------
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
<script src="js/jcarousellite_1.js" type="text/javascript"></script>
</head>
<body>
<!-- Carousel -->
<div id="carousel"> <a href="#" title="Previous" class="prev">Previous</a> <a href="#" title="Next" class="next">Next</a>
  <div style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 864px;" class="content">
    <ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2592px; left: -864px;">
 
<?php 
//Relative path to yout image directory
$dirpath = "../slideshow";
//Website URL to that same image directory
$dirURL = "http://www.jazzerup.com/blogexamples/slideshow/";
 
$folder = opendir($dirpath);
$pic_types = array("jpg", "jpeg");
$alttag = ""; 
$websiteurl= ""; 
$caption = ""; 
$index = array();
 
//Loop through the images in the directory
while ($file = readdir ($folder)) {
  if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
      {                       
      $items[] = $file;            
    }
}
//each time it loads it shuffles the images
shuffle($items);
for($i=0; $i<sizeof($items); $i++) {
  $picpath = $dirpath . "/" . $items[$i];
  $exif = exif_read_data($picpath, 'EXIF');
  $alttag = $exif['Title']; //alt tag
  $websiteurl= $exif['Subject']; //website url
  $caption = $exif['Comments']; //caption
 
  $varimages = $varimages . "<li style='overflow: hidden; float: left; width: 216px; height: 136px;'>";
 
//Build the html code based on the metadata 
  $varimages =  $varimages . " <img src='$picpath' height='120' width='200' style='border:3px solid #FFF;' alt='$alttag' />" . "\n\n" ;
 
  $alttag = ""; 
  $websiteurl= ""; 
  $caption = "";
  $varimages =  $varimages . "</li>";
 }
closedir($folder);
 
echo $varimages;
?>
    </ul>
  </div>
</div>
<!-- [END] Carousel --> 
<script type="text/javascript">
    $(window).load(function() {
 
      $("#carousel .content").jCarouselLite({
          btnNext: ".next",
          btnPrev: ".prev",
          speed: 800,
          visible: 4
      });
 
 
    });
    </script>
</body>
 

jQuery Nivo Slider - Images From Folder

on Sunday, 02 October 2011. Posted in All, Slideshow

Get the source code
$1.99

Includes working source code with images, style sheet and javascript.

One of my favorite free jQuery slideshow scripts is Nivo Slider

The major problem I had with the script is everytime I wanted to add another picture to the slideshow, I had to modify the jquery code to include that image. I wrote a script that will do the following:


1) Automatically lists the image files inside a directory and load them into your nivo slider.


2) Reads the picture metadata and adds it to the Nivo script


  • Metadata: Title becomes the Nivo Image Alt Tag
  • Metadata: Subject becomes the Nivo Image Link URL
  • Metadata: Comments becomes the Nivo Caption

demo

nivoexample.php
<!--
//----------------------------------------------------
// Nivo Slider Enhancement
// Created by Jaz Witham (Jazzerup)
// 2011
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND
// Script reads the image files and 
// image metadata into the nivo slider script
//----------------------------------------------------
-->
<body>
<div id="wrapper"> 
  <div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
<?php 
//This php code will generate your list of images based on 
//image files in a folder
 
$dirpath = "slideshow";
$dirURL = "http://www.jazzerup.com/blogexamples/slideshow/";
$folder = opendir($dirpath); // Use 'opendir(".")' if the PHP file is in the same folder as your images. Or set a relative path 'opendir("../path/to/folder")'.
$pic_types = array("jpg", "jpeg", "gif", "png");
$alttag = ""; //caption
$websiteurl= ""; //alt tag
$caption = ""; //website url
 
$index = array();
while ($file = readdir ($folder)) {
  if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
      {                       
      $items[] = $file;                                  
      }
}
for($i=0; $i<sizeof($items); $i++) {                  
  $picpath = $dirpath . "/" . $items[$i];
 
  //Get the meta data
  $exif = exif_read_data($picpath, 'EXIF');
  $alttag = $exif['Title']; //alt tag
  $websiteurl= $exif['Subject']; //website url
  $caption = $exif['Comments']; //caption
  if ($caption != "") {
    $caption =  "title='" . $caption  . "'";
    $alt = "alt='" . $caption  . "'";
  }
  if ($alttag != "") {
    $alt =  "alt='" . $alttag . "'";
  }
  if ($websiteurl != "") {
    $varimages =  $varimages . " <a href='$websiteurl'><img src='$picpath' $alt $caption /></a>" . "\n\n" ;
  } else {
  $varimages =  $varimages . " <img src='$picpath' $alt $caption />" . "\n\n" ;
      }
  $alttag = ""; //caption
  $websiteurl= ""; //alt tag
  $caption = ""; //website url
}
closedir($folder);
$varimages = substr_replace($varimages ,"",-1);
echo $varimages;
?>
    </div>
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> 
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
 
 
 

 

Updating Metadata in a file is very easy. On windows:

  1. Right click on the file
  2. Select Properties
  3. Select the "Details" tab
  4. Update Title, Subject and Comments and press "Okay"