I have a gallery that I think is perfect for my wishes, and I would like to put at least 3 or 4 galleries on one page. I have read (and reread!) article http://highslide.com/forum/viewtopic.php?f=7&t=7483 and article http://www.highslide.com/forum/viewtopic.php?f=4&t=4682 but do not quite understand what I must do.
I have created a test page here:
http://www.duckworthhouse.com/2Gal/test2.htm
Each gallery works perfectly except that when in slide show mode it plays all the slides, rather than only the ones in each gallery.
I have created each gallery in Editor. Even though I saved each gallery as gal1 and gal2, it seems that when ÔÇ£unzippedÔÇØ all the images have gone into the same folder, rather than kept separate.
In article 7483, you said:
How do I create this id? Does each slide have a thumbnailID? Is it the code in HTML? Or do I have to open a .js file or .css file and modify those. If so which one? (I just do not understand!)Each button (View examples) must have a unique id ÔÇô this id must be used as thumbnailId.
The first image for each gallery must also have a unique id ÔÇô this id must be used in the document.getElementById code for the corresponding button.
If it is the code for HTML, the code for gallery 1 that Editor produced (both step2 and step 3 combined) is: (The code produced for gallery 2 is almost identical!)
Code: Select all
[color=#0000BF][i]<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>Gallery 1</h3>
<div class="highslide-gallery">
<ul>
<li>
<a href="highslide/images/large/1473470_1.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/1473470_1.jpg" alt=""/>
</a>
</li>
<li>
<a href="highslide/images/large/1473470_2.jpg" class="highslide"
title=""
onclick="return hs[/i].expand(this, config1 )">
<img src="highslide/images/thumbs/1473470_2.jpg" alt=""/>
</a>
</li>
<li>
<a href="highslide/images/large/lagoon.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/lagoon.jpg" alt=""/>
</a>
</li>
<li>
<a href="highslide/images/large/leopardcat.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/leopardcat.jpg" alt=""/>
</a>
</li>
</ul>
<div style="clear:both"></div></div>[/color]Should I be putting this sort of code into my HTML instead of the code that the editor produced?Markup for your first gallery:[/i][/color]Code: Select all
<div class="highslide-gallery portfolio"> <a id="opener1" href="javascript:;" onclick="document.getElementById('thumb1').onclick(); return false;"><img src="i/button-view-examples.png" alt=`View Examples` /></a> <div style="display: none;"> <a id="thumb1" class='highslide' href='i/windows/casement/1.jpg' onclick="return hs.expand(this, {thumbnailId: 'opener1', slideshowGroup: 1 })"><img src="i/windows/casement/1.jpg" alt="" /></a> <a class='highslide' href='i/windows/casement/2.jpg' onclick="return hs.expand(this, {thumbnailId: 'opener1', slideshowGroup: 1 })"><img src="i/windows/casement/2.jpg" alt="" /></a> <a class='highslide' href='i/windows/casement/3.jpg' onclick="return hs.expand(this, {thumbnailId: 'opener1', slideshowGroup: 1 })"><img src="i/windows/casement/3.jpg" alt="" /></a> </div> </div>
What does ÔÇ£Code : Select allÔÇØ mean at the start of the instructions?
In the code that the Editor produced, I do not see anything like
Code: Select all
[color=#800000]<a id="opener1" href="javascript:;" onclick="document.getElementById('thumb1').onclick(); return[/color]Lastly, do I have to go through the code and put the yellow highlighted bits into each line where there is a slide?
I know I am asking a lot, but I love this program and would dearly love it to work on my site
Thank you.
John
