highslide attachment pic gallery with thumbnails

[Steve]

Description: Creates little thumbnail images to the left when viewing opened highslide image
you need to have the highslide attatchment mod by stoker installed: here
Upload this highlside folder to the root of your forum overwriting any excisting files used with stokers HS mod

highslide.zip

instructions

[spoiler]Open: styles/prosilver/template/overall_header.html
find:

Code: Select all

<link rel="stylesheet" href="{ROOT_PATH}highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="{ROOT_PATH}highslide/highslide-with-gallery.js"></script>
<script type="text/javascript">
	hs.wrapperClassName = 'controls-in-heading';
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;


	// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		slideshowGroup: 'highslide',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false
		}
	});
</script>

replace with:

Code: Select all

    <script type="text/javascript" src="{ROOT_PATH}highslide/highslide-full.packed.js"></script>
    <script type="text/javascript" src="{ROOT_PATH}highslide/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="{ROOT_PATH}highslide/highslide.css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="{ROOT_PATH}highslide/highslide-ie6.css" />
    <![endif]-->

Open: styles/prosilver/template/attachment.html
Find:

Code: Select all

		<!-- IF _file.S_THUMBNAIL -->
		<dl class="thumbnail">
			<dt><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a></dt>
			<!-- IF _file.COMMENT --><dd> {_file.COMMENT}</dd><!-- ENDIF -->
		</dl>
		<!-- ENDIF -->

Replace with:

Code: Select all

          <!-- IF _file.S_THUMBNAIL -->
          <div class="highslide-gallery">
             <a href="{_file.U_DOWNLOAD_LINK}/{_file.DOWNLOAD_NAME}"  class="highslide"
             title="{_file.COMMENT}"
             onclick="return hs.expand(this, config1 )"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a>
             
             <!-- IF _file.COMMENT --><br /> {_file.COMMENT}<!-- ENDIF -->
          </div>
          <!-- ENDIF -->

[/spoiler]

Refresh template for prosilver
Subsilver2 later.....

Demo :

thumb.PNG