User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Highslide z-index change

Hello,

is there a method to change the z-index of multiple galeries on one page?

I have a box with tabs and with changing the tabs the galerie should change:
http://www.angel-holidays.com/inc/de/toppangebote.php

Its just a Demo, nothing is styled exactly at the moment :P.

I think with CSS it is not possible, maybe an onchange for the Tab links?

Thank you very much,

Michael
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

Hi and thank you for your reply.

Maybe I am wrong with my considerations, because
I think it is not good to open all 4 galleries at one time.

Is there a possibility to open the gallery by clicking the
link in the TAB?

The first gallery should open immediately, the others when clicking on the tabs. At the same time the open gallery should close.

Do you know a sample with this requirements?

Thanks a lot,

Michael
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

Hi,

I used now this example, but something is missing:
http://forum.highcharts.com/viewtopic.php?f=4&t=4372

Here my DEMO:
http://www.angel-holidays.com/inc/de/toppangebote.php

Maybe I have to deactivate the auto start for the three gallerys. How can I realize it that the other gallery stops by clicking the tab of an other one?

Thank you
seba
Posts: 4415
Joined: Tue Jul 31, 2012 2:26 pm

Re: Highslide z-index change

Autoplay should be a solution, because then you will stop a "carousel" of images.
Sebastian Bochan
Highcharts Developer
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

Hello Sebastian,

thank you for your reply.

Autoplay is working well, but how can I stop the other galeries if I open another one?
The gallery wich changes the image always appears on top.

Thank you,

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

Re: Highslide z-index change

Hi Michael,

Here’s a demo page that uses Highslide in-page galleries and jQuery UI Tabs: http://www.roadrash.no/hs-support/jquer ... -tabs.html
You can probably use the same method used in the demo to make the in-page galleries work with the tabs you are using.

You'll find the HTML markup and the js settings for the galleries in the source code of the demo page.
Here's the onclick used for the tabs (the ID must be unique):
onclick="document.getElementById('thumb1').onclick(); hs.close();"
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

hi,

thank you for your help, that works fine now.

Just a last question, how can I get the big black controls?
I tried with className: 'large-dark', but it always appear the
small white control.

Thanks a lot,

Michael
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

Hi,

I have the gallery now nearly like I need her, just three
things:

1. How can I give the large images fixed sizes and the thumbs other size?

2. How can I put in text on the rightpanel, which changes at the same time
like the image. (Caption Text was not working, also a div with class highslide-caption was not working)

3. How can I get the big controls?

Thanks a lot,

Michael
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

Hi,

Here now the final design:

http://www.angel-holidays.com/inc/de/toppangebote1.php

I just need to put content in the rightpanel my other questions again:

1. How can I give the large images fixed sizes and the thumbs other size?

2. How can I put in text on the rightpanel, which changes at the same time
like the image. (Caption Text was not working, also a div with class highslide-caption was not working)

3. How can I get the big controls?

Thanks a lot,

Michael
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

Hello,

should I close this tread and open a new one?

Thank you,

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

Re: Highslide z-index change

1. 
Give large images fixed size:
You can constrain the size of the image area by defining hs.width and hs.height, set hs.useBox to true and hs.allowSizeReduction to true.

Give thumbs other size:

Add this to the CSS in the head of your page:

Code: Select all

.highslide-thumbstrip-horizontal img {
	height: 60px;   /* height of the thumb - change it to the value you want to use */
}
.highslide-thumbstrip-horizontal .highslide-marker {
	top: 67px;   /* must be 7px more than the height */
}
2. Text in the captions:
It seems like you have solved this. The captionEval uses text from the anchors title attribute.

3. Big dark controls: 

In each of the Options for the in-page items you need to replace this line:

Code: Select all

wrapperClassName: 'in-page controls-in-heading’,
with this:

Code: Select all

wrapperClassName: 'in-page dark’,
Add this to the CSS in the head of your page:

Code: Select all

.highslide-controls {
	width: 105px;
}
.highslide-caption {
	background: none !important;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

Re: Highslide z-index change

hi Hilde,

that works wonderful, thank you very much for your reply.

Just a last question:

Is there a possibility to put content on the rightpanel with this after <a></a>:

Code: Select all

     <div class="highslide-caption">
          Caption for the first image. This caption can be styled using CSS.
     </div>
Thank you,

Michael
User avatar
mallmis
Posts: 17
Joined: Fri Nov 16, 2012 1:20 pm

CLOSED - Highslide z-index change

Hi Hilde and thank you for everything,

I found the solution here
http://forum.highcharts.com/post80419.html#p80419

I just had to delete this:

Code: Select all

captionEval: 'this.a.title',
This thread is closed now.

Michael

Return to “Highslide JS Usage”