Trying to create a page with multiple mini galleries. Had a single gallery working great but when I tried to follow the directions by torstein.honsi for mini galleries:
http://www.highslide.com/forum/viewtopic.php?f=4&t=4682
This made the thumbs only a link to the first image and no gallery. I looked around and found several other examples with different approaches and tried each...hopefully not screwing everything up in the process!
I'm closest now to getting it to work but still several problems:
-galleries work but no thumbstrip
-no nav bar
-doesn't repeat at end of gallery(like it should...and did)
-Images and frames don't fade into the next. they sort of grow from the center of the screen but the frame and image are separated. Also, going from the galleries first to second image makes first image shrink to the page thumb.
Hopefully these are all associated-
Code: Select all
<!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" />
<title>SLAPP</title>
<link href="SLAPPSTYLE.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#content {
}
#column1 {
float: left;
width: 230px;
}
#column2 {
float: left;
width: 230px;
margin-left:15px;
}
#column3 {
float: left;
width: 230px;
margin-left:15px;
}
#column4 {
float: left;
width: 230px;
margin-left:15px;
}
</style>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header"> <a href="home.html"><img src="images/LOGOS/HOME/SLAPP.png" alt="SLAPP" width="712" height="179" /></a> </div><!--end header div-->
<div id="navbar">
<div id="navwork">
<img src="images/LOGOS/HOME/WORK- BLACK.png" width="144" height="49" /> </div>
<div id="navinfo">
<a href="info.html"><img src="images/LOGOS/HOME/INFO- GREY.png" width="114" height="49"/></a> </div>
<div id="navcontact">
<a href="contact.html"><img src="images/LOGOS/HOME/CONTACT-GREY.png" width="225" height="49"/></a> </div>
<div id="navnews">
<a href="news.html"><img src="images/LOGOS/HOME/NEWS- GREY.png" width="138" height="49"/></a> </div>
</div><!--end navbar div-->
<div id="content" onload="MM_effectAppearFade(this, 2000, 0, 100, false)">
<div id="column1">
<div id="cusd">
<div class="highslide-gallery">
<!--main image-->
<a id="thumb1" href="WORK/images/PROJECTS/CUSD/CUSD1.jpg" class="highslide"
onclick="return hs.expand(this, { slideshowGroup: 1 } )">
<img src="WORK/images/THUMBS 230PX/CUSD.jpg" alt="" title="Silo House" onmouseover="MM_effectAppearFade(this, 500, 100, 50, false)" onmouseout="MM_effectAppearFade(this, 500, 50, 100, false)"/>
</a>
<span class="highslide-caption">
<IMG src="WORK/images/PROJECTS/CUSD/silologoheader- small.gif" width="150" height="59"/>
<h2>SILO HOUSE</h2>
<P>Design/build </P>
</span>
<div class="hidden-container">
<!--IMAGE 2-->
<a href="WORK/images/PROJECTS/CUSD/CUSD.3.750.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailID: 'thumb1' , slideshowGroup: 1 } )">
<img src="WORK/images/THUMBS 230PX/CUSD 3.jpg" alt=""/>
</a>
<!--IMAGE 3-->
<a href="WORK/images/PROJECTS/CUSD/CUSD 3.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailID: 'thumb1' , slideshowGroup: 1 } )">
<img src="WORK/images/THUMBS 230PX/CUSD 3.jpg" alt=""/>
</a>
</div>
</div> <!--end highslide gallery div-->
</div> <!--end cusd div-->
</div> <!--end culumn1 div-->
<div id="column2">
<div class="highslide-gallery">
<a id="thumb2" href="highslide/sample-images/thumbstrip01.jpg" class="highslide"
onclick="return hs.expand(this, { slideshowGroup: 2 } )">
<img src="highslide/sample-images/thumbstrip01.thumb.jpg" alt=""/>
</a>
<span class="highslide-caption">Caption from a subsequent div</span>
<div class="hidden-container">
<a href="highslide/sample-images/thumbstrip02.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailID: 'thumb2' , slideshowGroup: 2 } )">
<img src="highslide/sample-images/thumbstrip02.thumb.jpg" alt=""/>
</a>
<span class="highslide-caption">Caption from a subsequent div</span>
<a href="highslide/sample-images/thumbstrip02.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailID: 'thumb2' , slideshowGroup: 2 } )">
<img src="highslide/sample-images/thumbstrip02.thumb.jpg" alt=""/>
</a>
<span class="highslide-caption">Caption from a subsequent div</span>
</div>
</div>
</div> <!--end culumn2 div-->
<div id="column3">
c3
</div> <!--end culumn1 div-->
<div id="column4">
c4
</div> <!--end culumn1 div-->
</div><!-- end content div-->
</div><!--end container div-->
</body>
</html>
Code: Select all
/**
* Site-specific configuration settings for Highslide JS
*/
hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'custom';
hs.dimmingOpacity = .4;
hs.dimmingDuration = 500;
hs.expandDuration = 400;
hs.restoreDuration = 550;
hs.transitionDuration = 350;
hs.outlineWhileAnimating = 1;
hs.align = 'center';
hs.padToMinWidth = true;
hs.minWidth = 175;
hs.maxWidth = 800;
hs.maxHeight = 800;
hs.allowMultipleInstances = false;
hs.blockRightClick = true;
hs.numberOfImagesToPreload = 10;
hs.captionOverlay.position = 'leftpanel';
hs.registerOverlay({
html: '<div class="close-simple-white" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
useOnHtml: true,
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
// Add the slideshow controller
hs.addSlideshow({
interval: 5000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'controls-in-heading',
opacity: 0.75,
position: 'bottom center',
offsetX: 0,
offsetY: -15,
hideOnMouseOut: true
},
thumbstrip: {
mode: 'horizontal',
position: 'bottom center',
relativeTo: 'viewport'
}
});
// gallery config objects
var config1 = {
slideshowGroup: 1,
thumbnailId: 'thumb1',
transitions: ['expand', 'crossfade']
};
var config2 = {
slideshowGroup: 2,
thumbnailId: 'thumb2',
transitions: ['expand', 'crossfade']
};
Any hope for me?
-Spencer