PDA

View Full Version : Using a database to populate a gallery widget


sandralynndesign
09-29-2011, 11:11 PM
Im using Spry Image Slideshow w/Filmstrip by the Spry Team. I have everything working so far except when loading the images into the filmstrip it hangs at the 2nd photo. I am so close to being finished. I have it set up like this:
Navigation sidebar gets the list of galleries from the galleries table:

<?php do { ?>
<li><a href="gallery.php?gallery_id=<?php echo $row_getGallery['gallery_id']; ?>"><?php echo $row_getGallery['gallery_name']; ?></a></li>
<?php } while ($row_getGallery = mysql_fetch_assoc($getGallery)); ?>

Clicking on the link takes you to the gallery.php page
This is before the DOCTYPE:

try {
require_once('scripts/db_definitions.php');
$gallery_id = checkId('gallery_id', 'includes/sidebar1.php');
if (isset($_POST['gallery'])) {
validateGalleryName($_POST['gallery_name'], $errors);
}
$gallery = getGallery($dbRead, $gallery_id);
$photos = getRelatedPhotos($dbRead, $gallery_id);

This is the dbDefinition:

function getRelatedPhotos($read, $gallery_id) {
$sql = "SELECT photos.photo_id, filename, caption
FROM photos
INNER JOIN photo2gallery USING (photo_id)
WHERE gallery_id = $gallery_id";
return $read->fetchAll($sql);
}

This pulls the photos up:

<?php foreach ($photos as $photo) { ?>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/<?php echo $photo['filename']; ?>"
title="<?php echo $photo['caption']; ?>">
<img src="gallery_images/<?php echo $photo['filename']; ?>" height="50"
alt="<?php echo $photo['caption']; ?>" /></a></li>
<?php } ?>
</ul>

As I said images start to come up into the filmstrip and hangs at the 2nd photo. If I click on one of the thumbnails, it comes up in the larger window. If I change to a different gallery by clicking the link in the Nav, a different set of images start to load but again hangs up at the 2nd photo.

davidj
09-30-2011, 02:51 PM
Im betting its not being rendered correctly

Post the source output

Please wrap it in forum code tags

sandralynndesign
10-01-2011, 09:39 AM
Not sure what you mean by forum code tags. Here it is.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="dragondancer.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/dragondancer.css)" rel="stylesheet" type="text/css" /> <script src="SpryAssets/SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryAssets/SpryMenuBar.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryDOMUtils.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryDOMUtils.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryDOMEffects.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryDOMEffects.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryWidget.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryWidget.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryPanelSelector.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryPanelSelector.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryPanelSet.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryPanelSet.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryFadingPanels.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryFadingPanels.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SprySliderPanels.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SprySliderPanels.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryFilmStrip.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryFilmStrip.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryImageLoader.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryImageLoader.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryImageSlideShow.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryImageSlideShow.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js)" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarVertical.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryAssets/SpryMenuBarVertical.css)" rel="stylesheet" type="text/css" /> <title>The Dragon Dancer - Exquisite Bellydance Entertainment</title> <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css)" rel="stylesheet" type="text/css" /> <style type="text/css"> /* BeginOAWidget_Instance_2141543: #ImageSlideShow */ #ImageSlideShow { width: 684px; margin: 24px 0px 0px 0px; border: solid 1px #090000; background-color: #440a01; padding-top: 10px; } #ImageSlideShow .ISSName { top: -24px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 18px; text-transform: none; color: #d39b63; } #ImageSlideShow .ISSSlideTitle { top: -18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; overflow: hidden; color: #d39b63; text-transform: none; } #ImageSlideShow .ISSClip { height: 400px; margin: 0 10px 10px 10px; border: solid 1px #d39b63; background-color: #000000; } #ImageSlideShow .ISSControls { top: 11px; height: 432px; } #ImageSlideShow .FilmStrip { height: 100px; background-color: #090000; } #ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton { width: 25px; height: 80px; } #ImageSlideShow .FilmStripTrack { height: 100px; } #ImageSlideShow .FilmStripContainer { height: 100px; } #ImageSlideShow .FilmStripPanel { height: 100px; padding-left: 10px; margin-right: 0px; } #ImageSlideShow .FilmStripPanel .ISSSlideLink { margin-top: 10px; border: solid 1px #2d0400; background-color: #2d0400; } #ImageSlideShow .FilmStripPanel .ISSSlideLinkRight { border: solid 1px #440a01; width: 56px; height: 47px; margin: 4px 4px 4px 4px; } #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink { background-color: #440a01; border-color: #d39b63; } #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight { border-color: #440a01; } /* EndOAWidget_Instance_2141543 */ </style> <script type="text/xml"> <!-- <oa:widgets> <oa:widget wid="2141543" binding="#ImageSlideShow" /> </oa:widgets> --> </script> </head> <body> <div class="container"> <div class="header"><!-- end .header --></div> <link href="SpryMenuBarVertical.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryMenuBarVertical.css)" rel="stylesheet" type="text/css" /> <script src="SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryMenuBar.js)" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarVertical.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryAssets/SpryMenuBarVertical.css)" rel="stylesheet" type="text/css" /> <div class="sidebar1"> <table width="180"> <tr><td align="left"> <ul id="MenuBar1" class="MenuBarVertical"> <li><a href="index.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/index.php)">Home</a></li> <li><a href="calendar.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/calendar.php)">Calendar</a></li> <li><a class="MenuBarItemSubmenu" href="# (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=1#)">Gallery</a> <ul> <li><a href="gallery.php?gallery_id=1 (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=1)">Performance</a></li> <li><a href="gallery.php?gallery_id=2 (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=2)">Costume</a></li> </ul></li> <li><a href="# (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=1#)" class="MenuBarItemSubmenu">Booking</a> <ul> <li><a href="booking.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/booking.php)">Information</a></li> <li><a href="terms.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/terms.php)">Terms &amp; Conditions</a></li> <li><a href="tips.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/tips.php)">Hosting Tips</a></li> </ul></li> </ul> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </td></tr> <tr><td align="center"> <center><h2>Contact<br /> Robin at:<br /> 209.345.9450</h2></center> <p>&nbsp;</p> </td></tr> <tr><td align="center"> <p>&nbsp;</p> <a href="http://sandralynndesign.com (http://www.dreamweaverclub.com/forum/view-source:http://sandralynndesign.com/)" target="_blank"><img src="images/sld-logo.gif (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/images/sld-logo.gif)" width="176" height="70" alt="Website by: SandraLynnDesign.com" longdesc="http://sandralynndesign.com" /></a> <p> <a href="login.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/login.php)"> <font size="-2">Admin</font></a></p> <!-- Start of StatCounter Code --> <script type="text/javascript"> var sc_project=6891713; var sc_invisible=0; var sc_security="5b97d649"; </script> <script type="text/javascript" src="http://www.statcounter.com/counter/counter.js (http://www.dreamweaverclub.com/forum/view-source:http://www.statcounter.com/counter/counter.js)"></script><noscript><div class="statcounter"><a title="hits counter" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/6891713/0/5b97d649/0/" alt="hits counter" ></a></div></noscript> <!-- End of StatCounter Code --> </td></tr> </table> <!-- end .sidebar1 --></div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> <div class="content"> <table width="750" cellspacing="20"> <tr><td align="center" valign="top"> <h1>Performance Gallery</h1></td></tr> <tr><td align="center" valign="top"> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Camelheads01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Camelheads01lg.jpg)" title=" Crazy camel heads"> <img src="gallery_images/Camelheads01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Camelheads01lg.jpg)" height="50" alt=" Crazy camel heads" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Pic_9.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Pic_9.jpg)" title=" rereretetete"> <img src="gallery_images/Pic_9.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Pic_9.jpg)" height="50" alt=" rereretetete" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_2002.jpg)" title=" ette"> <img src="gallery_images/Shayloe_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_2002.jpg)" height="50" alt=" ette" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_fund_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_fund_2002.jpg)" title=" "> <img src="gallery_images/Shayloe_fund_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_fund_2002.jpg)" height="50" alt=" " /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_Rak_2000.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_Rak_2000.jpg)" title=" "> <img src="gallery_images/Shayloe_Rak_2000.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_Rak_2000.jpg)" height="50" alt=" " /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_SJ_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_SJ_2002.jpg)" title=" "> <img src="gallery_images/Shayloe_SJ_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_SJ_2002.jpg)" height="50" alt=" " /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Stance-4b.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Stance-4b.jpg)" title=" testign"> <img src="gallery_images/Stance-4b.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Stance-4b.jpg)" height="50" alt=" testign" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/TroupeTree01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/TroupeTree01lg.jpg)" title=" big palm tree"> <img src="gallery_images/TroupeTree01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/TroupeTree01lg.jpg)" height="50" alt=" big palm tree" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Standing_shadow.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Standing_shadow.jpg)" title=" "> <img src="gallery_images/Standing_shadow.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Standing_shadow.jpg)" height="50" alt=" " /></a></li> </ul> <script type="text/javascript"> // BeginOAWidget_Instance_2141543: #ImageSlideShow var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", { widgetID: "ImageSlideShow", widgetClass: "BasicSlideShowFS", injectionType: "replace", autoPlay: true, displayInterval: 8000, transitionDuration: 2000, componentOrder: ["name", "title", "view", "controls", "links"], sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" }, plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugi n, Spry.Widget.ImageSlideShow.TitleSliderPlugin ], TFSP: { pageIncrement: 8, wraparound: true } }); // EndOAWidget_Instance_2141543 </script></td></tr> </table> <!-- end .content --></div> <div class="footer"> <h4>&copy; Copyright 2011, TheDragonDrancer.com, All rights reserved.</h4> <!-- end .footer --></div> <!-- end .container --></div> </body> </html>

davidj
10-04-2011, 10:26 AM
You need to lay this out in a way I can read it.

There are code buttons above your editor to wrap the code in so its presented better

sandralynndesign
10-04-2011, 10:01 PM
Here is the output again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="dragondancer.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/dragondancer.css)" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryAssets/SpryMenuBar.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryDOMUtils.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryDOMEffects.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryWidget.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryPanelSelector.js)" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryPanelSet.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryPanelSet.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryFadingPanels.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SprySliderPanels.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryFilmStrip.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryImageLoader.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/SpryImageSlideShow.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js)" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js)" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryAssets/SpryMenuBarVertical.css)" rel="stylesheet" type="text/css" /> <title>The Dragon Dancer - Exquisite Bellydance Entertainment</title>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css)" rel="stylesheet" type="text/css" /> <style type="text/css">

/* BeginOAWidget_Instance_2141543: #ImageSlideShow */

#ImageSlideShow {
width: 684px; margin: 24px 0px 0px 0px; border: solid 1px #090000; background-color: #440a01; padding-top: 10px; } #ImageSlideShow .ISSName { top: -24px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 18px; text-transform: none; color: #d39b63; } #ImageSlideShow .ISSSlideTitle { top: -18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; overflow: hidden; color: #d39b63; text-transform: none; } #ImageSlideShow .ISSClip { height: 400px; margin: 0 10px 10px 10px; border: solid 1px #d39b63; background-color: #000000; } #ImageSlideShow .ISSControls { top: 11px; height: 432px; } #ImageSlideShow .FilmStrip { height: 100px; background-color: #090000; } #ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton { width: 25px; height: 80px; } #ImageSlideShow .FilmStripTrack { height: 100px; } #ImageSlideShow .FilmStripContainer { height: 100px; } #ImageSlideShow .FilmStripPanel { height: 100px; padding-left: 10px; margin-right: 0px; } #ImageSlideShow .FilmStripPanel .ISSSlideLink { margin-top: 10px; border: solid 1px #2d0400; background-color: #2d0400; } #ImageSlideShow .FilmStripPanel .ISSSlideLinkRight { border: solid 1px #440a01; width: 56px; height: 47px; margin: 4px 4px 4px 4px; } #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink { background-color: #440a01; border-color: #d39b63; } #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight { border-color: #440a01; } /* EndOAWidget_Instance_2141543 */ </style> <script type="text/xml"> <!-- <oa:widgets> <oa:widget wid="2141543" binding="#ImageSlideShow" /> </oa:widgets> --> </script> </head> <body> <div class="container"> <div class="header"><!-- end .header --></div> <link href="SpryMenuBarVertical.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryMenuBarVertical.css)" rel="stylesheet" type="text/css" /> <script src="SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryMenuBar.js)" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarVertical.css (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/SpryAssets/SpryMenuBarVertical.css)" rel="stylesheet" type="text/css" /> <div class="sidebar1"> <table width="180"> <tr><td align="left"> <ul id="MenuBar1" class="MenuBarVertical"> <li><a href="index.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/index.php)">Home</a></li> <li><a href="calendar.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/calendar.php)">Calendar</a></li> <li><a class="MenuBarItemSubmenu" href="# (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=1#)">Gallery</a> <ul> <li><a href="gallery.php?gallery_id=1 (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=1)">Performance</a></li> <li><a href="gallery.php?gallery_id=2 (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=2)">Costume</a></li> </ul></li> <li><a href="# (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery.php?gallery_id=1#)" class="MenuBarItemSubmenu">Booking</a> <ul> <li><a href="booking.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/booking.php)">Information</a></li> <li><a href="terms.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/terms.php)">Terms &amp; Conditions</a></li> <li><a href="tips.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/tips.php)">Hosting Tips</a></li> </ul></li> </ul> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </td></tr> <tr><td align="center"> <center><h2>Contact<br /> Robin at:<br /> 209.345.9450</h2></center> <p>&nbsp;</p> </td></tr> <tr><td align="center"> <p>&nbsp;</p> <a href="http://sandralynndesign.com (http://www.dreamweaverclub.com/forum/view-source:http://sandralynndesign.com/)" target="_blank"><img src="images/sld-logo.gif (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/images/sld-logo.gif)" width="176" height="70" alt="Website by: SandraLynnDesign.com" longdesc="http://sandralynndesign.com" /></a> <p> <a href="login.php (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/login.php)"> <font size="-2">Admin</font></a></p> <!-- Start of StatCounter Code --> <script type="text/javascript"> var sc_project=6891713; var sc_invisible=0; var sc_security="5b97d649"; </script> <script type="text/javascript" src="http://www.statcounter.com/counter/counter.js (http://www.dreamweaverclub.com/forum/view-source:http://www.statcounter.com/counter/counter.js)"></script><noscript><div class="statcounter"><a title="hits counter" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/6891713/0/5b97d649/0/" alt="hits counter" ></a></div></noscript> <!-- End of StatCounter Code --> </td></tr> </table> <!-- end .sidebar1 --></div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> <div class="content"> <table width="750" cellspacing="20"> <tr><td align="center" valign="top"> <h1>Performance Gallery</h1></td></tr> <tr><td align="center" valign="top"> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Camelheads01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Camelheads01lg.jpg)" title=" Crazy camel heads"> <img src="gallery_images/Camelheads01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Camelheads01lg.jpg)" height="50" alt=" Crazy camel heads" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Pic_9.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Pic_9.jpg)" title=" rereretetete"> <img src="gallery_images/Pic_9.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Pic_9.jpg)" height="50" alt=" rereretetete" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_2002.jpg)" title=" ette"> <img src="gallery_images/Shayloe_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_2002.jpg)" height="50" alt=" ette" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_fund_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_fund_2002.jpg)" title=" "> <img src="gallery_images/Shayloe_fund_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_fund_2002.jpg)" height="50" alt=" " /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_Rak_2000.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_Rak_2000.jpg)" title=" "> <img src="gallery_images/Shayloe_Rak_2000.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_Rak_2000.jpg)" height="50" alt=" " /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Shayloe_SJ_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_SJ_2002.jpg)" title=" "> <img src="gallery_images/Shayloe_SJ_2002.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Shayloe_SJ_2002.jpg)" height="50" alt=" " /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Stance-4b.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Stance-4b.jpg)" title=" testign"> <img src="gallery_images/Stance-4b.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Stance-4b.jpg)" height="50" alt=" testign" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/TroupeTree01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/TroupeTree01lg.jpg)" title=" big palm tree"> <img src="gallery_images/TroupeTree01lg.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/TroupeTree01lg.jpg)" height="50" alt=" big palm tree" /></a></li> <ul id="ImageSlideShow" title=""> <li><a href="gallery_images/Standing_shadow.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Standing_shadow.jpg)" title=" "> <img src="gallery_images/Standing_shadow.jpg (http://www.dreamweaverclub.com/forum/view-source:http://localhost/dragondancer/gallery_images/Standing_shadow.jpg)" height="50" alt=" " /></a></li> </ul> <script type="text/javascript"> // BeginOAWidget_Instance_2141543: #ImageSlideShow var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", { widgetID: "ImageSlideShow", widgetClass: "BasicSlideShowFS", injectionType: "replace", autoPlay: true, displayInterval: 8000, transitionDuration: 2000, componentOrder: ["name", "title", "view", "controls", "links"], sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" }, plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugi n, Spry.Widget.ImageSlideShow.TitleSliderPlugin ], TFSP: { pageIncrement: 8, wraparound: true } }); // EndOAWidget_Instance_2141543 </script></td></tr> </table> <!-- end .content --></div> <div class="footer"> <h4>&copy; Copyright 2011, TheDragonDrancer.com, All rights reserved.</h4> <!-- end .footer --></div> <!-- end .container --></div> </body> </html>

sandralynndesign
10-04-2011, 11:03 PM
It chopped it off due to time limit. Ill try again

sandralynndesign
10-05-2011, 01:20 AM
Another try

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="dragondancer.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

<title>The Dragon Dancer - Exquisite Bellydance Entertainment</title>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #ImageSlideShow */

#ImageSlideShow {
width: 684px;
margin: 24px 0px 0px 0px;
border: solid 1px #090000;
background-color: #440a01;
padding-top: 10px;
}

#ImageSlideShow .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: none;
color: #d39b63;
}

#ImageSlideShow .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
overflow: hidden;
color: #d39b63;
text-transform: none;
}

#ImageSlideShow .ISSClip {
height: 400px;
margin: 0 10px 10px 10px;
border: solid 1px #d39b63;
background-color: #000000;
}

#ImageSlideShow .ISSControls {
top: 11px;
height: 432px;
}

#ImageSlideShow .FilmStrip {
height: 100px;
background-color: #090000;
}

#ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton {
width: 25px;
height: 80px;
}

#ImageSlideShow .FilmStripTrack {
height: 100px;
}

#ImageSlideShow .FilmStripContainer {
height: 100px;
}

#ImageSlideShow .FilmStripPanel {
height: 100px;
padding-left: 10px;
margin-right: 0px;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #2d0400;
background-color: #2d0400;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #440a01;
width: 56px;
height: 47px;
margin: 4px 4px 4px 4px;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink {
background-color: #440a01;
border-color: #d39b63;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #440a01;
}

/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141543" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>
</head>

<body>

<div class="container">
<div class="header"><!-- end .header --></div>


<link href="SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

<script src="SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />




<div class="sidebar1">

<table width="180">
<tr><td align="left">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.php">Home</a></li>
<li><a href="calendar.php">Calendar</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Gallery</a>

<ul>

<li><a href="gallery.php?gallery_id=1">Performance</a></li>
<li><a href="gallery.php?gallery_id=2">Costume</a></li>


</ul></li>

<li><a href="#" class="MenuBarItemSubmenu">Booking</a>

<ul>

<li><a href="booking.php">Information</a></li>
<li><a href="terms.php">Terms &amp; Conditions</a></li>
<li><a href="tips.php">Hosting Tips</a></li>
</ul></li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
</td></tr>

<tr><td align="center">
<center><h2>Contact<br />
Robin at:<br />
209.345.9450</h2></center>
<p>&nbsp;</p>

</td></tr>

<tr><td align="center">
<p>&nbsp;</p>
<a href="http://sandralynndesign.com" target="_blank"><img src="images/sld-logo.gif" width="176" height="70" alt="Website by: SandraLynnDesign.com" longdesc="http://sandralynndesign.com" /></a>


<p>
<a href="login.php">
<font size="-2">Admin</font></a></p>

<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6891713;
var sc_invisible=0;
var sc_security="5b97d649";

</script>

<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="hits counter"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6891713/0/5b97d649/0/"
alt="hits counter" ></a></div></noscript>
<!-- End of StatCounter Code -->
</td></tr>
</table>


<!-- end .sidebar1 --></div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

<div class="content">

<table width="750" cellspacing="20">

<tr><td align="center" valign="top">
<h1>Performance Gallery</h1></td></tr>
<tr><td align="center" valign="top">

<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/Camelheads01lg.jpg"
title=" Crazy camel heads">
<img src="gallery_images/Camelheads01lg.jpg" height="50"
alt=" Crazy camel heads" /></a></li>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/Pic_9.jpg"
title=" rereretetete">
<img src="gallery_images/Pic_9.jpg" height="50"
alt=" rereretetete" /></a></li>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/Shayloe_2002.jpg"
title=" ette">
<img src="gallery_images/Shayloe_2002.jpg" height="50"
alt=" ette" /></a></li>
<ul id="ImageSlideShow" title="">

<li><a href="gallery_images/Shayloe_fund_2002.jpg"
title=" ">
<img src="gallery_images/Shayloe_fund_2002.jpg" height="50"
alt=" " /></a></li>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/Shayloe_Rak_2000.jpg"
title=" ">
<img src="gallery_images/Shayloe_Rak_2000.jpg" height="50"
alt=" " /></a></li>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/Shayloe_SJ_2002.jpg"
title=" ">
<img src="gallery_images/Shayloe_SJ_2002.jpg" height="50"
alt=" " /></a></li>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/Stance-4b.jpg"
title=" testign">
<img src="gallery_images/Stance-4b.jpg" height="50"
alt=" testign" /></a></li>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/TroupeTree01lg.jpg"
title=" big palm tree">
<img src="gallery_images/TroupeTree01lg.jpg" height="50"
alt=" big palm tree" /></a></li>
<ul id="ImageSlideShow" title="">
<li><a href="gallery_images/Standing_shadow.jpg"
title=" ">
<img src="gallery_images/Standing_shadow.jpg" height="50"
alt=" " /></a></li>

</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141543: #ImageSlideShow

var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
widgetID: "ImageSlideShow",
widgetClass: "BasicSlideShowFS",
injectionType: "replace",
autoPlay: true,
displayInterval: 8000,
transitionDuration: 2000,
componentOrder: ["name", "title", "view", "controls", "links"],
sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugi n, Spry.Widget.ImageSlideShow.TitleSliderPlugin ],
TFSP: { pageIncrement: 8, wraparound: true }
});
// EndOAWidget_Instance_2141543
</script></td></tr>
</table>


<!-- end .content --></div>

<div class="footer">

<h4>&copy; Copyright 2011, TheDragonDrancer.com, All rights reserved.</h4>



<!-- end .footer --></div>
<!-- end .container --></div>





</body>
</html>