ChrisThornton
Posts: 3
Joined: Thu Jun 04, 2009 4:01 pm

Rolling Image with Gallery Popup

Hi

I have setup a popup gallery very much as in your "Thumbstrip above the image, subsequent thumbnails hidden" barebones example. What I would also like though is to have the original thumbnail which is in situ on the main page cycle through the available images, so it's really like one simple mini slideshow without controls that opens up into the larger and more complex one with controls and a thumbstrip when clicked. Is this possible?

Chris

PS: I am really impressed with what you've achieved here and I think the new Highslide Editor looks fantastic.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Rolling Image with Gallery Popup

Thanks Chris!

I created an example for your request at http://highslide.com/studies/cycling-thumb.html . The mod is done exclusively in CSS as you can see from the documented source code.

Code: Select all

<style type="text/css">
/* Mod for making the thumbnail images cycle with the active image */
.highslide-gallery {
	position: relative;
}
.hidden-container { /* Place it on top of the first thumbnail */
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.hidden-container a {
	display: none;
}
.hidden-container a.highslide-active-anchor {
	display: block;
	width: 76px; /* The width plus border of the biggest thumbnail */
	height: 60px;
	background: white; /* Mask the underlying thumb */
	text-align: center;
}
</style>
Torstein Hønsi
CTO, Founder
Highsoft
ChrisThornton
Posts: 3
Joined: Thu Jun 04, 2009 4:01 pm

Re: Rolling Image with Gallery Popup

Thanks Torstein. That's almost exactly what I was looking for, but I really wanted the thumbnail to cycle automatically as soon as the page opens rather than only when the gallery popup is animating. I've been trying for hours with no luck, but I've probably been looking in the wrong place.

I've found this http://www.roadrash.no/hs-support/examp ... tator.html which is how I want it to look to start with, but I'd then like the gallery with thumbstrip to open when the image is clicked.

Chris.
buschihh
Posts: 6
Joined: Fri Jun 05, 2009 12:58 pm

Re: Rolling Image with Gallery Popup

Hi Chris, hi Torstein,

I have the same question like you, Chris. I would like to have a "small" thumnail picture that cycles through all the pictures in the gallery automatically when the site opens. When the user is clicks on one of those picturse Highslide opens in its unique fantastic fashion.

The example you posted Torstein either dosn't work or was not I an Chris are looking for. Do you think you can find a solution?

Karsten from Germany
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Rolling Image with Gallery Popup

Chris and Karsten,

My advice is that you use the Cycle plugin for jQuery. Set it up to cycle through your existing Highslide thumbnails.
Torstein Hønsi
CTO, Founder
Highsoft
buschihh
Posts: 6
Joined: Fri Jun 05, 2009 12:58 pm

Re: Rolling Image with Gallery Popup

Hi Torstein,

This morning I thought exact the same while I was "playing" with JQuery Cycle! :lol:
Since I am an absolutly newbie I won't do this "Highslide/JQueryCycle-Combination" just in a wink. Try-and-error will it be. Lets see how far I come. Can you give me a basic hint?
Right know I have a further problem with Cycle. It works fine with Mozilla and Opera but not with IE7. I have no idea what I made wrong but already asked the forum.

I will let you know when I made some progess.

Karsten
buschihh
Posts: 6
Joined: Fri Jun 05, 2009 12:58 pm

Re: Rolling Image with Gallery Popup

Hi,

it's me again. I tried to combine Highslide and JQuery Cycle Plugin and basically it works. Now I have a litle-size slideshow in one picture and if I click into one picture Highslide opens and I have a typical big Highslide slideshow.
The advanced programm of you will be able to start Highslide with the picture you just have clicked. Thats too much for me, but I am fine with the results I got.
Right now, it doesn't work on IE7 but this is the problem of Cycle which I am too stupid to install :roll: In Mozilla and Opera it work fine.

If you want to try it yourself. Here is my way.
1. I implemented Highslide until it worked in the way I liked it.
2. I implemented seperatly JQuery Cycle until it worked in the way I liked it too.

Than I just copied the cycle code in the thumnail of Highslide. Thats it. Take a look:
<div class="highslide-gallery">
<a id="thumb1" href="bilder/bild_1.JPG" class="highslide" title="Text f├╝r das Bild wenn aufgezoomt" onclick="return hs.expand(this, config1 )">
<div id="slideshow1" class="pics"> <!-- Highslide Thumnail but filled with JQuery Cycle Plugin div id='slidesshow1'-->
<img src="bilder/bild_1.JPG" width="200" height="200" alt="text"/>
<img src="bilder/bild_2.jpg" width="200" height="200" />
<img src="bilder/bild_3.jpg" width="200" height="200" />
</div>
</a>
<div class="hidden-container"> <!-- from here on highslide continous -->

Cheers, Karsten
buschihh
Posts: 6
Joined: Fri Jun 05, 2009 12:58 pm

Re: Rolling Image with Gallery Popup

admin wrote:Chris and Karsten,

My advice is that you use the Cycle plugin for jQuery. Set it up to cycle through your existing Highslide thumbnails.

Hi Torstein,

sorry to bother you. In my last post I told you that I combined Cycle and Highslide (my little problem with cycle and IE was solved. I forgot a comma :evil: ).
From the function point of view, it works fine at all. But: in the Highslide view there are some oddities. take a look
1. the smal triangle is now under the big picture
2. the big picture is high above the buttons. this change when you get to the vertical picture no. 6. Than the gap between big picture and thumstrip disappear but the triangle also
3. from total 9 pictures only 8 are shown in the thumstrip
4. big picture and thumstrip are not inline

Have you got an idea?

Thanks, Karsten

ps: take a look at the code. it is all in there. i havn't changed anything in the css and js
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Rolling Image with Gallery Popup

Study the source code of this example page with Highslide and Cycle plugin for jQuery: http://www.roadrash.no/hs-support/galle ... lugin.html
Last edited by RoadRash on Wed Jun 10, 2009 4:22 pm, edited 1 time in total.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
ChrisThornton
Posts: 3
Joined: Thu Jun 04, 2009 4:01 pm

Re: Rolling Image with Gallery Popup

Just a quick update to let you know that I finally got this working. I took Torstein's advice and used a third-party fader with the highslide gallery popup. I didn't use the jQuery cycle plugin though as my pages are already pretty heavy with javascript and I really couldn't justify loading a large library for this one effect. In the end I found this small script http://slayeroffice.com/code/imageCrossFade/xfade2.html which I modified a bit to get working alongside highslide. It appears fine so far in IE7 and Firefox 3.0.10 so I have a bit more cross-browser testing to do, but the code looks to me like it will travel OK.

Thanks all,

Chris.
buschihh
Posts: 6
Joined: Fri Jun 05, 2009 12:58 pm

Re: Rolling Image with Gallery Popup

Thanks RoadRash,

now it works almost perfekt. Now I can dive deep into layout. Thanks sofar.

Buschihh
bumchum
Posts: 6
Joined: Sat Feb 26, 2011 4:18 am

Re: Rolling Image with Gallery Popup

Sorry to bump such an old thread, but I've recently run into a similar issue.

RoadRash, your page is an example of precisely what I am attempting to resolve. What you have works perfectly, except that when you click an image to bring up the original, I would like it so that the jQuery Cycle plugin "pauses" the slideshow it's producing. I know how to pause with jQuery Cycle, but it requires an onClick event. Unfortunately, this onClick event disrupts HighSlide's, so you can only do one or the other.

I have even tried using hs.onSetClickEvent, but to no avail. Merely having the 'rel' tags on a link breaks either jQuery Cycle or HighSlide (specifically, it makes it so HighSlide won't fire and instead the link loads a new browser tab with the original image).

Any thoughts? Any way to create a wrapper or something that won't conflict with these two plugins so that when you click an image rotating through the jQuery Cycle slideshow, it pauses the slideshow itself and brings up a HighSlide window?

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

Re: Rolling Image with Gallery Popup

Study the source code of this live demo: http://www.roadrash.no/hs-support/galle ... esume.html
Note: Requires highslide-full.js
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
bumchum
Posts: 6
Joined: Sat Feb 26, 2011 4:18 am

Re: Rolling Image with Gallery Popup

That is utterly perfect! Thank you very much for your help.
ALLPRO
Posts: 7
Joined: Sat Jul 03, 2010 11:07 pm

Re: Rolling Image with Gallery Popup

RoadRash wrote:Study the source code of this live demo: http://www.roadrash.no/hs-support/galle ... esume.html
Note: Requires highslide-full.js
Hi Hilde,

For the record, your sample pause functionality is incomplete because it will un-pause when the user clicks a thumb in the slideshow thumb-strip. I suggest using a callback (maybe onInit() or onFocus()) to pause cycle so it will re-pause if another thumb is triggered.

Better yet, add code so the display (cycle) image pauses AND synchronizes with the newly opened thumb. This would also address cycle flipping the display image _in-between_ the times when one image closes and the next opens, without using a timer. It wouldn't matter if it flipped because you'd be setting it anyway.

Highslide _should_ have some events specific to slideshows, in addition to the individual expander events. This would make it simple to trigger code when a slideshow begins or ends - a common use-case. For example, in this situation the cycle plugin would be paused by onSlideshowInit(), and un-paused in onAfterSlideshowClose().

/Kevin

Return to “Highslide JS Usage”