开发者

Highslide gallery with two different thumbnails

开发者 https://www.devze.com 2023-04-03 01:47 出处:网络
I\'m trying to make a gallery with highslide. I have two thumbnails, a larger but cropped one listed on the page opening the large image if clicked on, and a smaller one with varying aspect ratio for

I'm trying to make a gallery with highslide.

I have two thumbnails, a larger but cropped one listed on the page opening the large image if clicked on, and a smaller one with varying aspect ratio for the thumbstrip.

How do I configure highslide to actually use different images 开发者_开发知识库for the thumbstrip?

For example this is a part of the markup:

<a href="highslide/sample-images/picture12.jpg" class="highslide" 
        title="Caption from the anchor's title attribute" 
        onclick="return hs.expand(this, config1 )">
    <img src="highslide/sample-images/picture12.thumb.jpg"  alt=""/>
</a>

The link is pointing to the large picture, the img is showing the cropped thumbnail.

Can I override a function for example to use two thumbnails like:

<a href="highslide/sample-images/picture12.jpg" class="highslide" 
        title="Caption from the anchor's title attribute" 
        onclick="return hs.expand(this, config1 )">
    <img class="thumb" src="highslide/sample-images/picture12.thumb.jpg"  alt=""/>
    <img class="strip" src="highslide/sample-images/picture12.strip.jpg" style="display: none" alt="" />
</a>


Actually I found a solution to this some time ago:

On the highslide api reference http://highslide.com/ref/ there is a function stripItemFormatter. The parameter of the function is the element you expand (the element).

the string returned by this function will be parsed as html, and used as an item of the thumbstrip.

If you check this example: http://highslide.com/ref/hs.stripItemFormatter you can see how it's done.

0

精彩评论

暂无评论...
验证码 换一张
取 消