One Gallery - Different Pictures

[nickbowers]

Hi,
Two things.

1. On my website (example here http://tinyurl.com/24lnwpv ) i have the main image(which works) but i cant seem to get the other images below it to open. Previsouly (onthe older version i am upgrading from) i have had it so that the other images just opened the first image of the gallery, i can not even get that to work. If possible i would like it so clicking on the smaller images it opens the correct one in the gallery.

2. How can i increase the thumbnail image size?

Regards,
Nick

[RoadRash]

Hi Nick,

1)
Remove the hidden-container ÔÇô this:

Code: Select all

<div class="hidden-container">
<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4306.jpg' title="Hitachi EX150 - 5LC & Tilt Bucket" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='http://thumbs.truckandmachinery.com.au/small_100_4306.jpg' width="200px" alt=''/></a>
<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4304.jpg' title="Hitachi EX150 - 5LC & Tilt Bucket" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='http://thumbs.truckandmachinery.com.au/small_100_4304.jpg' width="200px" alt=''/></a>
<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4303.jpg' title="Hitachi EX150 - 5LC & Tilt Bucket" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='http://thumbs.truckandmachinery.com.au/small_100_4303.jpg' width="200px" alt=''/></a>
<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4302.jpg' title="Hitachi EX150 - 5LC & Tilt Bucket" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='http://thumbs.truckandmachinery.com.au/small_100_4302.jpg' width="200px" alt=''/></a>

<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4301.jpg' title="Hitachi EX150 - 5LC & Tilt Bucket" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='http://thumbs.truckandmachinery.com.au/small_100_4301.jpg' width="200px" alt=''/></a>
<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4300.jpg' title="Hitachi EX150 - 5LC & Tilt Bucket" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='http://thumbs.truckandmachinery.com.au/small_100_4300.jpg' width="200px" alt=''/></a>
<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4299.jpg' title="Hitachi EX150 - 5LC & Tilt Bucket" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='http://thumbs.truckandmachinery.com.au/small_100_4299.jpg' width="200px" alt=''/></a>
</div>

Change this:

Code: Select all

<div class="highslide-gallery">
<a class='highslide' href='http://photos.truckandmachinery.com.au/100_4305.jpg'  onclick="return hs.expand(this)" title="Hitachi EX150 - 5LC & Tilt Bucket"><img alt="" src='http://photos.truckandmachinery.com.au/100_4305.jpg' class="largeimage" /></a><br /></div>
<table width="100%">
<tr>
<td><a id="thumb100_4305.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4305.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4306.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4306.jpg" class="image" alt="" /></a>
</td>

</tr>
<tr>
<td><a id="thumb100_4304.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4304.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4303.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4303.jpg" class="image" alt="" /></a>
</td>
</tr>
<tr>
<td><a id="thumb100_4302.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4302.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4301.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4301.jpg" class="image" alt="" /></a>
</td>
</tr>
<tr>
<td><a id="thumb100_4300.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4300.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4299.jpg" href="javascript:;" onclick="return document.getElementById('thumb1').onclick()"><img src="http://thumbs.truckandmachinery.com.au/small_100_4299.jpg" class="image" alt="" /></a>

</td>
</tr>
</table>

To this:

Code: Select all

<div class="highslide-gallery">
<a id="thumb1" class='highslide' href='http://photos.truckandmachinery.com.au/100_4305.jpg'  onclick="return hs.expand(this, miniGalleryOptions1)" title="Hitachi EX150 - 5LC & Tilt Bucket"><img alt="" src='http://photos.truckandmachinery.com.au/100_4305.jpg' class="largeimage" /></a><br />
<table width="100%">
<tr>
<td><a id="thumb100_4305.jpg" href="http://photos.truckandmachinery.com.au/100_4305.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4305.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4306.jpg" href="http://photos.truckandmachinery.com.au/100_4306.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4306.jpg" class="image" alt="" /></a>
</td>

</tr>
<tr>
<td><a id="thumb100_4304.jpg" href="http://photos.truckandmachinery.com.au/100_4304.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4304.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4303.jpg" href="http://photos.truckandmachinery.com.au/100_4303.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4303.jpg" class="image" alt="" /></a>
</td>
</tr>
<tr>
<td><a id="thumb100_4302.jpg" href="http://photos.truckandmachinery.com.au/100_4302.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4302.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4301.jpg" href="http://photos.truckandmachinery.com.au/100_4301.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4301.jpg" class="image" alt="" /></a>
</td>
</tr>
<tr>
<td><a id="thumb100_4300.jpg" href="http://photos.truckandmachinery.com.au/100_4300.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4300.jpg" class="image" alt="" /></a>
</td>
<td><a id="thumb100_4299.jpg" href="http://photos.truckandmachinery.com.au/100_4299.jpg" onclick="return hs.expand(this, miniGalleryOptions1)"><img src="http://thumbs.truckandmachinery.com.au/small_100_4299.jpg" class="image" alt="" /></a>

</td>
</tr>
</table>
</div>

2)
Change height for thumbs in the thumbstrip (my example will set 60px height to the thumbs)
Find this part of the highslide.css file:

Code: Select all

.highslide-thumbstrip-horizontal img {
	width: auto;
	height: 40px;
}
.highslide-thumbstrip-horizontal .highslide-marker {
	top: 47px;
	border-left-width: 6px;
	border-right-width: 6px;
	border-bottom: 6px solid gray;
}

And change the highlighted values:

Code: Select all

.highslide-thumbstrip-horizontal img {
	width: auto;
	[hilight]height: 60px;[/hilight]
}
.highslide-thumbstrip-horizontal .highslide-marker {
	[hilight]top: 67px;[/hilight]
	border-left-width: 6px;
	border-right-width: 6px;
	border-bottom: 6px solid gray;
}

You also need to change offsetY for the controls ÔÇô find this part:

Code: Select all

	overlayOptions: {
		className: 'text-controls',
		position: 'bottom center',
		relativeTo: 'viewport',
		offsetY: -60
	},

Change it to this:

Code: Select all

	overlayOptions: {
		className: 'text-controls',
		position: 'bottom center',
		relativeTo: 'viewport',
		[hilight]offsetY: -90[/hilight]
	},