disspencer
Posts: 3
Joined: Fri Sep 09, 2011 7:18 pm

mini gallery troubles!

Hi-
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>
highside.config.js

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
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: mini gallery troubles!

Hi Spencer,

Yes, itÔÇÖs hope for you. :) Your highslide.config.js file is correct as far as I can see. The problem is the onclick events for your galleries.

Note the highlighted parts in the onclick events; they correspond with the config objects you have in your highslide.config.js file.
Also note that thumbnailId for config1 correspond with id for the first anchor in the first gallery ÔÇô the same goes for thumbnailId for config2.

Your first gallery:

Code: Select all

              <div class="highslide-gallery">
                   
                    <!--main image-->
                    <a id="thumb1" href="WORK/images/PROJECTS/CUSD/CUSD1.jpg" class="highslide"
                    [color=#FF0000]onclick="return hs.expand(this, [hilight]config1[/hilight] )"[/color]>
                    <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"
                            [color=#FF0000]onclick="return hs.expand(this, [hilight]config1[/hilight] )"[/color]>
                    <img src="WORK/images/THUMBS 230PX/CUSD 3.jpg"  alt=""/>
                    </a>
                       
                       
                    <!--IMAGE 3-->   
               <a href="WORK/images/PROJECTS/CUSD/CUSD 3.jpg" class="highslide"
                            [color=#FF0000]onclick="return hs.expand(this, [hilight]config1[/hilight] )"[/color]>
                        <img src="WORK/images/THUMBS 230PX/CUSD 3.jpg"  alt=""/>
                    </a>

               
                  </div>
          </div> <!--end highslide gallery div-->
Your second gallery:

Code: Select all

        <div class="highslide-gallery">
            <a id="thumb2" href="highslide/sample-images/thumbstrip01.jpg" class="highslide"
                    [color=#FF0000]onclick="return hs.expand(this, [hilight]config2[/hilight] )"[/color]>
                <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"
                    [color=#FF0000]onclick="return hs.expand(this, [hilight]config2[/hilight] )"[/color]>
                <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"
                    [color=#FF0000]onclick="return hs.expand(this, [hilight]config2[/hilight] )"[/color]>
                <img src="highslide/sample-images/thumbstrip02.thumb.jpg"  alt=""/>
            </a>
            <span class="highslide-caption">Caption from a subsequent div</span>
   
   </div>
</div>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide Editor”