I’ve been working on a dynamic gallery slideshow: http://www.blissfulpicture.com/
An I decided to share a little bit of the code and the jQuery script:
Here’s some of the HTML Code:
[code]
Dynamic Picture Gallery
J.R. Pepp Develops professional photography galleries that are dynamic, meaning you will be able to upload images to the gallery and delete photographs from a browser. No need to know any HTML/CSS or JavaScript. The design of the photogallery is up to you and the layout of the images, such as size of large image and number of thumbnails (if any).
Here’s php code that goes below the HTML code that was posted in this case:
[php]<?php
$setFlag = false; // Set ending html condition to false:
$y = 1; // Current Row of Thumbnails to be Displayed:
$x = 1; // Picture Count:
if (isset($resultDir)) {
while ($pictures = $resultDir->fetch()) { // Fetch Picture Paths from Database:
if ( ($x % 8) == 1) { // Check every 8th Picture:
echo ‘
- ’;
$setFlag = true; // Set ending html condition to true:
}
echo ‘
if ( ($x % 8) == 0) {
$y += 1;
echo ‘
$setFlag = false; // Set ending html back to false:
}
$x += 1;
}
}
if ($setFlag) echo '</ul></div>'; // If amount of pics isn't 6 set end html tags:
?>[/php]
Now I figure that people who know how to program in php code can figure how to get the pictures into the HTML. For those that can’t just convert the PHP back to HTML and obviously you will have to manually insert the anchor tags along with the image thumbnail image (which would kind of suck in my opinion :o). I also will give you a hint that I used a form drop-drop list to change categories using once again PHP;however, you can probably do that in jQuery. I said I was going to share the code, I didn’t say it was going to be fully functional. Besides this is a great way to learn jQuery and/or PHP. Anyways now for the fun stuff, the JQuery Script:
[code]// Photogallery jQuery Scripts written by John R. Pepp
// Version: 01 Beta 03a
// Date: 03/22/2014
// Revised Date: 04/01/14
$(function() {
/* Hide Submit Button and Change Category Script */
$('.submitCat').hide(); // Hide Enter Button
$('.mySelection').change(function() {
$("#selectDir").submit(); // Submit selected directory to display correct pictures:
}); // End of Submit Function;
/* Start of Photo Gallery Slideshow */
var $tNav = $('.tNav'), // Thumbnail div tag:
$firstImage = $('.thumbnail:first-child'),
$thumbnail = $('.thumbnail'),
$largeImage = $('.largeImage'),
$controlBtns = $('.picBox'),
$rightBtn = $('.picSlideRight'),
$leftBtn = $('.picSlideLeft'),
currentPicNum = 1, // Initial Current Picture:
speed = 2200, // Rotation Speed:
slideSpeed = 5000, // Slideshow Speed:
newSlides = 1,
totalPics = $('.thumbnail:last').data('thumbnail'); // Total Pictures in database:
$tNav.hide(); // Hide every row:
startRotate();
/* Show right and left arrow */
$controlBtns.hover(function() {
$('.controls').show();
stopRotate(); // Pause rotate slideshow:
}, function() {
$('.controls').hide();
startRotate(); // Resume rotate slideshow:
});
$tNav.hover(function() {
stopRotate();
}, function() {
startRotate();
});
/* Move Right One Picture */
$rightBtn.on('click', moveRight);
function moveRight() {
currentPicNum += 1;
if (currentPicNum > totalPics) {
currentPicNum = 1;
}
movePicture(currentPicNum);
}
/* Move Left One Picture */
$leftBtn.on('click', function() {
currentPicNum -= 1;
if (currentPicNum < 1) {
currentPicNum = totalPics;
}
movePicture(currentPicNum);
});
/* Move Picture and Change Thumbnails if needed */
function movePicture(nextPic) {
if ($('img').hasClass('nextPic')){
$('.nextPic').remove();
} // Remove old html tag next picture:
var imgSource = $('a#thumb' + nextPic).attr('href'), // Get Image Source:
imgCount = $('a#thumb' + nextPic).data('thumbnail'), // Current Image Count:
thumbRow = $('a#thumb' + nextPic).data('row'); // Current Thumbnails Display:
if ( newSlides != thumbRow ) { // If New Thumbnail Row doesn't equal current Thumbnail Row:
$('.tNav:nth-child(' + newSlides + ')').hide(); // Stop Display Current Row:
newSlides = thumbRow; // Current Row Becomes New Row:
$('.tNav:nth-child(' + newSlides + ')').show(); // Show Display New Row:
}
$('a#thumb' + (nextPic-1)).find('.thumbs').css('background-color', '#fff');
$('a#thumb' + nextPic).find('.thumbs').css('background-color', '#5695af');
// Put HTML IMAGE TAG together:
var imageTag = '<img class="nextPic" src="' + imgSource + '" alt="Picture" />';
$('.current').before(imageTag); // Put Next Picture Tag Before Current Picture Tag:
/* Animate Photograph with Rotation effect */
/* Opacity of Next Pic to Zero then Animate it to 1.0 */
$('.nextPic').css('opacity', 0.0).animate({opacity: 1.0}, speed,
function() {
$('.current').attr('src', imgSource); // Next Picture Becomes Current Picture
});
} // End of Move & Place Picture, plus change Thumbnail Display Function
/* Show First Row of Thumbnails in Category */
$('.tNav:nth-child(' + newSlides + ')').show();
/* First Image in each Category Show */
$('.current').attr('src', $firstImage.attr('href'));
$('a#thumb1').find('.thumbs').css('background-color', '#5695af');
/* Change Big Picture on Thumbnail Click */
$thumbnail.on('click', function(e) {
e.preventDefault(); // Disable Anchor Tag Default:
currentPicNum = $(this).data('thumbnail');
movePicture(currentPicNum); // Mover to Corresponding Picture when
// Thumbnail is clicked:
});
/* START ROTATOR */
function startRotate() {
myRotator = setInterval(moveRight, slideSpeed); // Call the rotate_speed function using setInterval:
}
/* STOP ROTATOR */
function stopRotate() {
clearInterval(myRotator); // Stop the Rotator using clearInterval():
}
}); // End of Doc Ready:
[/code]
As you can see the jQuery script really isn’t that lengthy, but it sure packs a punch in my opinoin 8). Now it probably can be refined some more and improved upon, not probably I know it can. 
However, this is still a work in progress for me, for I’m still working the jQuery and the PHP Uploading of the images, but it’s something to do. I like using a JavaScript Library (jQuery) over straight JavaScript for a couple of reasons, one it’s easier in my opinion and it plays nicer with cross-browser compatibility (Well sometime Safari doesn’t play nice with me for some strange reason). If anyone is tackling a photo slideshow and wants to incorporate part or all of this script feel free to do, but I can’t make any guarantees that there isn’t any bugs in the code and I don’t do technical support on it (you’re on your own). I will gladly answers questions if I have the time. I’m still developing this myself and so far so good as of right now.
Oh here’s a little CSS to help you out:
[code].picBox {
overflow: hidden;
position: relative;
z-index: 0;
}
.nextPic {
position: absolute;
z-index: 1;
}
.currentPic {
position: absolute;
z-index: 2;
}
.mainPicture {
position: relative;
display: block;
width: 100%;
max-width: 448px;
height: 100%;
max-height: 300px;
margin: 0 auto;
}
.controls {
display: none;
outline: none;
border: none;
position: relative;
top: 0;
width: 100%;
z-index: 500px;
margin: 0;
}
.picSlideLeft, .picSlideRight {
box-sizing: border-box;
overflow: hidden;
outline: none;
border: none;
color: rgba($color-100, 1.0);
font-size: 2.6rem;
padding: 110px 20px;
display: block;
position: absolute;
bottom: 25px;
width: 50%;
max-width: 448px;
z-index: 500;
cursor: pointer;
&:hover {
color: rgba($color-1300, 0.9);
}
}
.picSlideRight {
text-align: right;
right: 0;
}
.tNav {
display: block;
position: relative;
width: 100%;
max-width: 746px;
height: 62px;
vertical-align: center;
padding: 20px 20px 20px 20px;
background-color: $color-1000;
margin: 20px auto;
}[/code]
Sorry, I use Sass and Compass - just convert it over to straight CSS or just visit the website link that I gave you and you can see the whole CSS.