iWeb FAQ - Highslide JS Photo Gallery with Thumbstrip

iWebFAQ.org

 

Intro and index of this FAQ

Page 1: Highslide JS iFrame

Page 2: Highslide JS Photo (like Lightbox but better!)

Page 3: Highslide JS PhotoGallery (like Lightbox but better!)

Page 4: Highslide JS PhotoGallery with Thumbstrip

Page 5: Highslide JS Flash

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 



Page 4: Highslide PhotoGallery with Thumbstrip in iWeb


Example:




Click the thumbnail. To go forward and backward put the mouse pointer to the top of the image and click when the forward or back flash appears.


(A little bit of code knowledge would be good for that, or at least not be afraid of it)


1) Go to Highslide and Download Highslide.

2) You will get a folder Highslide-4 (or similar)

3) In that folder you will find a Folder named “highslide” containg the following files:

- A Folder named “graphics”

- A file named “highslide-full.js”

- and many more files

4) Take that folder and change permissions of the folder as follows:

Hit command(Apple)+i

Go to sharing&permissions and set all permissions to read&write and select "Apply to enclosed items" where the gear displays.

5) Upload the highslide folder (the one of step 3) to the root location of your server (If you don't know what the root is or how this is done read it here)

6) As it doesn’t work with HTML Snippets we will use MassReplaceIt (Download here for Free) you can also use iTweak (Instructions and troubleshoot on using MassReplaceIt and iTweak can be found on the Alternative HTML FAQ please read that FAQ!)


7) First we use it to put some code into the <head></head> tags of the page:

Search: </head>

Replace with (copy&paste the following code):



<script type="text/javascript" src="/highslide/highslide-with-gallery.js"></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">

hs.graphicsDir = '/highslide/graphics/';

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.fadeInOut = true;

hs.outlineType = 'glossy-dark';

hs.wrapperClassName = 'dark';

hs.captionEval = 'this.a.title';

hs.numberPosition = 'caption';

hs.useBox = true;

hs.width = 600;

hs.height = 400;

//hs.dimmingOpacity = 0.8;


// Add the slideshow providing the controlbar and the thumbstrip

hs.addSlideshow({

//slideshowGroup: 'group1',

interval: 5000,

repeat: false,

useControls: true,

fixedControls: 'fit',

overlayOptions: {

position: 'bottom center',

opacity: .75,

hideOnMouseOut: true

},

thumbstrip: {

position: 'above',

mode: 'horizontal',

relativeTo: 'expander'

}

});


// Make all images animate to the one visible thumbnail

var miniGalleryOptions1 = {

thumbnailId: 'thumb1'

}

</script>



</head>



To change the width of the Highslide iFrame opening change the number in red in the above code.


8) In iWeb add a TextBox where you want the link or thumbnail to appear and write

HighslideGallery1 or whatever you want (however it must be specific for that)

Put it in the Search of MassReplaceIt or iTweak and in the Replace write:



<div class="highslide-gallery">


<a class='highslide' id="thumb1" href='/images/thumbstrip11.jpg' title="Two cabins"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip11.thumb.png' alt=''/></a>


<div class="hidden-container">


        <a class='highslide' href='/images/thumbstrip12.jpg' title="Patterns in the snow"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip12.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip13.jpg' title="Cabins"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip13.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip14.jpg' title="Old stone cabins"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip14.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip15.jpg' title="A litte open water"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip15.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip16.jpg' title="Dipper"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip16.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip17.jpg' title="Dipper"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip17.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip18.jpg' title="Mountains"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip18.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip19.jpg' title="Birch trees"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip19.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip20.jpg' title="Highland woods"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip20.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip21.jpg' title="Frozen lake"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip21.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip22.jpg' title="Spring in the mountains"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip22.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip23.jpg' title="Spring in the mountains"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip23.thumb.png' alt=''/></a>


<a class='highslide' href='/images/thumbstrip24.jpg' title="Fjord landscape"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip24.thumb.png' alt=''/></a>


</div>

</div>



Put the images in a folder called “images” and upload this folder to the root of your server (If you don't know what the root is or how this is done read it here)

In the code change the names of the photo files (in red) to match your case. The one called “thumbstripXX.thumb.png” is the smaller one which displays in the thumbstrip.

Also change the title for the pictures.


9) In MassReplaceIt under Files add only the html files of the page (or pages) you want to add the Highslide to.


  1. 10)Publish from iWeb run MassReplaceIt and you’re done. As previously mentioned visit the Alternative HTML FAQ if you don’t know how MassReplaceIt works or for troubleshooting.


If you want to have the Gallery opening from a TextLink rather than from a Thumbnail instead of this part of the code:


<div class="highslide-gallery">


<a class='highslide' id="thumb1" href='/images/thumbstrip11.jpg' title="Two cabins"

onclick="return hs.expand(this, miniGalleryOptions1)">

<img src='/images/thumbstrip11.thumb.png' alt=''/></a>


Use this one:


<div class="highslide-gallery">


<a class='highslide' id="thumb1" href='/images/thumbstrip11.jpg' title="Two cabins"

onclick="return hs.expand(this, miniGalleryOptions1)">

Text to display</a>


And change Text to Display to the text you want to appear as the link to open the Gallery.




NOTE: In MassReplaceIt make a new Query for each page and under Files add only the page the Query is for.




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark