pchrisley22
Posts: 2
Joined: Thu Jun 16, 2011 7:21 pm

Open gallery from a single thumb

I'm sure I've read somewhere that you can open your gallery from a single thumb. My gallery shows all of the thumbs. Otherwise my slideshow is working great. Any help would be appreciated. Here is my code:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <meta name="Generator" content="iWeb 2.0.4" />
    <meta name="iWeb-Build" content="local-build-20110624" />
    <meta name="viewport" content="width=700" />
    <title>PRODUCTS</title>
    <link rel="stylesheet" type="text/css" media="screen,print" href="Products_files/Products.css" />
    <!--[if IE]><link rel='stylesheet' type='text/css' media='screen,print' href='Products_files/ProductsIE.css'/><![endif]--><style type="text/css">
/*<![CDATA[*/
	@import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
    <script type="text/javascript" src="Scripts/iWebSite.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
    <script type="text/javascript" src="Products_files/Products.js"></script>
  </head>
  <body style="background: #ffffff; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
    <div style="text-align: center; ">
      <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word;  background: #ffffff; text-align: left; width: 700px; " id="body_content">
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 35px; margin-top: 0px; position: relative; width: 630px; z-index: 1; ">
    
            <div id="widget0-navbar" class="navbar">

      
              <div id="widget0-bg" class="navbar-bg">

        
                <ul id="widget0-navbar-list" class="navbar-list">
 <li></li> 
</ul>
                
      
</div>
              
    
</div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new NavBar('widget0', 'Scripts/Widgets/Navbar', 'Scripts/Widgets/SharedResources', '.', {"current-page-GUID": "3C19C393-8996-4745-A6BF-797F4FCD0C2B", "path-to-root": "", "isCollectionPage": "NO", "navbar-css": ".navbar {\n\tfont-family: Arial, sans-serif;\n\tfont-size: 1em;\n\tcolor: #666;\n\tmargin: 9px 0px 6px 0px;\n\tline-height: 30px;\n}\n\n.navbar-bg {\n\ttext-align: center;\n}\n\n.navbar-bg ul {\n\tlist-style: none;\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\n\nli {\n\tlist-style-type: none;\n\tdisplay: inline;\n\tpadding: 0px 10px 0px 10px;\n}\n\n\nli a {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:visited {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:hover\r{\r\n \tcolor: #463C3C;\n\ttext-decoration: none;\r}\n\n\nli.current-page a\r{\r\t color: #463C3C;\n\ttext-decoration: none;\n\tfont-weight: bold;\r\r}\n"});
//--><!]]></script>
          <div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
        </div>
        <div style="height: 73px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div style="height: 1px; width: 630px;  height: 0px; left: 35px; position: absolute; top: 3px; width: 630px; z-index: 1; " class="tinyText">
            <div style="position: relative; width: 630px; ">
              <img src="Products_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 0px; position: absolute; top: 0px; width: 630px; " />
            </div>
          </div>
          


          <div id="id1" style="height: 50px; left: 35px; position: absolute; top: 23px; width: 630px; z-index: 1; " class="style_SkipStroke">
            <div class="text-content style_External_630_50" style="padding: 0px; ">
              <div class="style">
                <p style="padding-bottom: 0pt; padding-top: 0pt; " class="Header">Create your sumptuous sanctuary</p>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 100px; left: 51px; position: absolute; top: 284px; width: 200px; z-index: 1; ">
            <iframe id="widget1-frame" src=".//Products_files/widget1_markup.html" frameborder="0" style="width: 100%; height: 100%;" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true"></iframe>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget1', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {});
//--><!]]></script>
          <div id="id2" style="height: 100px; left: 101px; position: absolute; top: 66px; width: 100px; z-index: 1; " class="style_SkipStroke_1">
            <div class="text-content graphic_textbox_layout_style_default_External_100_100" style="padding: 0px; ">
              <div class="graphic_textbox_layout_style_default">
                <p style="padding-bottom: 0pt; padding-top: 0pt; " class="Body"><script type="text/javascript" src="/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="/highslide/highslide.config.js" charset="utf-8"></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]-->


<h3>Metro and Loft Contemporary Collections</h3>
<div class="highslide-gallery">
	<ul>
	<li>
	<a href="/highslide/images/large/metrobed.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/metrobed.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Metro birdseye maple panel bed</span>
	</li>
	<li>
	<a href="/highslide/images/large/metronightstand.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/metronightstand.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Metro birdseye maple drawer front</span>
	</li>
	<li>
	<a href="/highslide/images/large/902_BirdsEyeShotdetail_sales.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/902_BirdsEyeShotdetail_sales.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Metro headboard detail</span>
	</li>
	<li>
	<a href="/highslide/images/large/metro_w_footboard.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/metro_w_footboard.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Metro complete bed</span>
	</li>
	<li>
	<a href="/highslide/images/large/902-11-22Loft.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/902-11-22Loft.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Loft cork headboard</span>
	</li>
	<li>
	<a href="/highslide/images/large/902-11-22LoftHeadboard_Detail_sales.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/902-11-22LoftHeadboard_Detail_sales.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Loft headboard detail</span>
	</li>
	<li>
	<a href="/highslide/images/large/902-71-22LoftNightstand_sales.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/902-71-22LoftNightstand_sales.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Loft cork drawer nightstand</span>
	</li>
	<li>
	<a href="/highslide/images/large/902-71-99NightstandwithAgateDrawer_sales.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/902-71-99NightstandwithAgateDrawer_sales.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Agate drawer front</span>
	</li>
	<li>
	<a href="/highslide/images/large/metroconsole.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/metroconsole.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Metro console on brushed metal base</span>
	</li>
	<li>
	<a href="/highslide/images/large/902-38-22LoftConsole_dark_sales.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/902-38-22LoftConsole_dark_sales.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Loft console with dark cork drawer</span>
	</li>
	<li>
	<a href="/highslide/images/large/902-38-22LoftConsolewithCorkDrawer_sales.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
		<img src="/highslide/images/thumbs/902-38-22LoftConsolewithCorkDrawer_sales.jpg"  alt=""/>
	</a>
	<span class="highslide-heading">Loft console with light cork drawer</span>
	</li>
	</ul>
	<div style="clear:both"></div></div>
</p>
              </div>
            </div>
          </div>
          <div style="height: 480px; line-height: 480px; " class="spacer"> </div>
        </div>
        <div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div id="id3" style="height: 23px; left: 184px; position: absolute; top: 104px; width: 331px; z-index: 1; " class="style_SkipStroke_1">
            <div class="text-content graphic_textbox_layout_style_default_External_331_23" style="padding: 0px; ">
              <div class="graphic_textbox_layout_style_default">
                <p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style">Copyright ┬® P.Chrisley International - 2011 - All Rights Reserved</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Open gallery from a single thumb

Yes, you can open the gallery from a single thumb, but you need to redo your gallery in the Highslide Editor to get the correct HTML markup.
See this screenshot for what settings you need:
2011-06-24_1856.png
2011-06-24_1856.png (92.64 KiB) Viewed 4281 times
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
pchrisley22
Posts: 2
Joined: Thu Jun 16, 2011 7:21 pm

Re: Open gallery from a single thumb

Many thanks for the quick reply! I

Return to “Highslide Editor”