different galleries / one page CSS pb

Rolande · Sat Jan 16, 2016 8:56 pm

Hi, i'm sorry for my english but i'm french.
I make tests on this page :
http://www.commeuneonde.fr/HS/

I'd like to have diefferent dimming mask color for each gallery.

I saw css rule
.highslide-dimming {
background: #E55050;
}

but I can't find how to customize each one with a different color.
than'k for help

MisterNeutron · Sat Jan 16, 2016 9:55 pm

You can use http://highslide.com/ref/hs.wrapperClassName. For example:

Code: Select all

<a class="highslide" href="full1.jpg" onclick="return hs.expand(this, { wrapperClassName: 'red-dimming' })">
   <img src="thumb1.jpg" alt="">
</a>
<a class="highslide" href="full3.jpg" onclick="return hs.expand(this, { wrapperClassName: 'blue-dimming' })">
   <img src="thumb3.jpg" alt="">
</a>

The CSS:

Code: Select all

.red-dimming .highslide-dimming {
    background: #ff0000;
}
.blue-dimming .highslide-dimming {
    background: #0000ff;
}

MisterNeutron · Sat Jan 16, 2016 10:06 pm

And to configure two separate galleries, you can use config objects. In the <head> section, or in highslide.config.js:

Code: Select all

<script>
var config1 = {
	slideshowGroup: 'group1',
	wrapperClassName: 'red-dimming'
};

var config2 = {
	slideshowGroup: 'group2',
	wrapperClassName: 'blue-dimming'
};
</script>

The HTML:

Code: Select all

<a class="highslide" href="full1.jpg" onclick="return hs.expand(this, config1)">
   <img src="thumb1.jpg" alt="">
</a>

(etc.)

Same CSS as above.

Rolande · Wed Jan 20, 2016 9:49 pm

I understand the principle Thanks But I don't know wy it does'nt work !
I surely missed something ...
The link again : http://www.commeuneonde.fr/HS/

HTML
<div class="highslide-gallery">
<a id="thumb1" href="highslide/images/large/slideA_001.jpg" class="highslide"
title="" onclick="return hs.expand(this, config1)">
<img src="highslide/images/thumbs/slideA_001.jpg" alt=""/>
</a>

my CSS
.dimmin1 .highslide-dimming {
background: #ffff00;
}
.dimmin2 .highslide-dimming {
background: #E55050;
}
my JS (I already had 2 groups)
var config1 = {
slideshowGroup: 'group1',
wrapperClassName: 'dimmin1',
outlineType: 'rounded-white',
autoplay: true,
thumbnailId: 'thumb1',
transitions: ['expand', 'crossfade']
};
var config2 = {
slideshowGroup: 'group2',
wrapperClassName: 'dimmin2',
outlineType: 'rounded-white',
autoplay: true,
thumbnailId: 'thumb2',
transitions: ['expand', 'crossfade']
};

MisterNeutron · Wed Jan 20, 2016 9:58 pm

You haven't supplied the CSS for the dimmin1 and dimmin2 wrapperClasses. Par example:

Code: Select all

.dimmin1 .highslide-dimming {
    background: #ff0000;
}
.dimmin2 .highslide-dimming {
    background: #0000ff;
}

Edit: Oh, I see, you've put it into highslide.css. I'll need to study your page a bit more to figure out why it's not working.

MisterNeutron · Wed Jan 20, 2016 10:14 pm

Now I understand! The wrapperClassName applies only to highslide-wrapper. The dimming background isn't part of the wrapper, so my solution will not work. (You could use it for something like a different border on highslide-image, for example, since that is within the wrapper.)

I'll have to think about this a bit more....

MisterNeutron · Wed Jan 20, 2016 10:56 pm

I can't find a way to target the highslide-dimming CSS for different galleries. The container div is being created "on the fly" by the script, and it's not part of anything else.

I don't think it's possible to do this. You may have to settle for "gray."

Rolande · Thu Jan 21, 2016 4:03 pm

Thank you very much for your help and patience.
I'll make all dimming masks blue ... It works very well. It will be less beautifull than a colour for each one but that's already very fun

see you ...

Rolande · Tue Apr 19, 2016 9:44 pm

Hi,
I've fished all tests. My page is great.
I use photo galery (SCULPTURE / CERAMIQUE) and text ("A propos" and "Mentions légales" at the bottom) in the same page.

http://www.commeuneonde.fr/HS/

thanks again

different galleries / one page CSS pb

different galleries / one page CSS pb

Re: different galleries / one page CSS pb

Re: different galleries / one page CSS pb

Re: different galleries / one page CSS pb

Re: different galleries / one page CSS pb

Re: different galleries / one page CSS pb

Re: different galleries / one page CSS pb

Re: different galleries / one page CSS pb

Re: different galleries / one page CSS pb