silkscreen
Posts: 2
Joined: Fri Jan 21, 2011 12:19 am

Exclude a single image from the gallery

Greetings.

We are creating a new template for our community college. And we are using the BEST GALLERY EVER, Highslide, for our slideshow gallery.

The gallery is called from a click on the top horizontal banner (which is also running some extra JS (rotating on page refresh). Hence basically the rotating banner images, and the feature (Highslide) slideshow are two separate sets of images.

You can see it live here. http://new.luna.edu/all-academics/

When the highslide gallery pops up, the gallery includes the banner image up at the time (notice the horizontally superior thumb there). I have tried to correctly implement slideshowGroup, i think i am missing something simple however and i am confused on how i can exclude that single banner image from the group.

Might you shed some light when you have a moment?

I would like to thank you for such a great gallery, and such a friendly and helpful forum. I realize you let non-profits and schools use this freely (too cool), but when billing comes around I would like the community college to own a copy. I will do my best with that.

Cheers.

Adam
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Exclude a single image from the gallery

Hi Adam,

You can replace the thumbs in the thumbstrip using the stripItemFormatter
Give each anchor a unique id:

Code: Select all

<div class="highslide-gallery"> 
			<a [hilight]id="thumb1"[/hilight] href="http://new.luna.edu/media/img/slide_1.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )">
			<img class="shuffle" alt=""/> 
			</a>
      <div class="hidden-container"> 
			<a [hilight]id="thumb2"[/hilight] href="http://new.luna.edu/media/img/slide_2.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_2_thumb.png"  alt=""/> 
			</a> 
			<a [hilight]id="thumb3"[/hilight] href="http://new.luna.edu/media/img/slide_3.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_3_thumb.png"  alt=""/> 
			</a> 
			<a [hilight]id="thumb4"[/hilight] href="http://new.luna.edu/media/img/slide_4.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_4_thumb.png"  alt=""/> 
			</a> 
			<a [hilight]id="thumb5"[/hilight] href="http://new.luna.edu/media/img/slide_5.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_5_thumb.png"  alt=""/> 
			</a> 
			<a [hilight]id="thumb6"[/hilight] href="http://new.luna.edu/media/img/slide_6.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_6_thumb.png"  alt=""/> 
			</a> 
			<a [hilight]id="thumb7"[/hilight] href="http://new.luna.edu/media/img/slide_7.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_7_thumb.png"  alt=""/> 
			</a> 
			<a [hilight]id="thumb8[/hilight]" href="http://new.luna.edu/media/img/slide_8.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_8_thumb.png"  alt=""/> 
			</a> 
			<a [hilight]id="thumb9"[/hilight] href="http://new.luna.edu/media/img/slide_9.png" class="highslide" 
			title="www.luna.edu" 
			onclick="return hs.expand(this, config1 )"> 
			<img src="http://new.luna.edu/media/img/slide_9_thumb.png"  alt=""/> 
			</a> 
	  </div>

    </div>
Define a new thumb for each id like this (add it to your highslide.config.js file):

Code: Select all

hs.stripItemFormatter = function(a) {
	if (a.id == 'thumb1') return '<img src="http://new.luna.edu/media/img/slide_1_thumb.png" alt="" />';
	if (a.id == 'thumb2') return '<img src="http://new.luna.edu/media/img/slide_2_thumb.png" alt="" />';
	if (a.id == 'thumb3') return '<img src="http://new.luna.edu/media/img/slide_3_thumb.png" alt="" />';
	if (a.id == 'thumb4') return '<img src="http://new.luna.edu/media/img/slide_4_thumb.png" alt="" />';
	if (a.id == 'thumb5') return '<img src="http://new.luna.edu/media/img/slide_5_thumb.png" alt="" />';
	if (a.id == 'thumb6') return '<img src="http://new.luna.edu/media/img/slide_6_thumb.png" alt="" />';
	if (a.id == 'thumb7') return '<img src="http://new.luna.edu/media/img/slide_7_thumb.png" alt="" />';
	if (a.id == 'thumb8') return '<img src="http://new.luna.edu/media/img/slide_8_thumb.png" alt="" />';
	if (a.id == 'thumb9') return '<img src="http://new.luna.edu/media/img/slide_9_thumb.png" alt="" />';
};
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
silkscreen
Posts: 2
Joined: Fri Jan 21, 2011 12:19 am

Re: Exclude a single image from the gallery

Indeed. The gallery is displaying only those specified items now.

You folks are so cool.

Thank you,

Adam

Return to “Highslide Editor”