Indexhibit Support

Hi,

Always loving Indexhibit, but had a bit of a query and thought maybe you guys could help me.

This is my site: www.artistrichardcook.co.uk - simple, simple... however I wanted to play around a little with the images. I want to be able to rollover the images and that a block colour, with a certain opacity, would hover over it. I have managed to create some css for it:

{
background: transparent url(../images/black80.png) repeat;
background: rgba(0, 0, 0, 0.8) none;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

This, in normal situations (if it works!) would be created under a new span class and then recalled in the html document to specific images, much like arsondpi states here: http://www.indexhibit.org/forum/thread/8521/

However, what if I want it to take place on all the images that are uploaded and displayed through an exhibition format (I use Iwakami)? Is there somewhere I can add this to the css of that image? Or would I have to edit the exhibition format script created by Iwakami?

Just need some direction, hope you guys can help!

Cheers,

Richard

Actually, could I just apply

#img {
background: transparent url(../images/black80.png) repeat;
background: rgba(0, 0, 0, 0.8) none;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

Would that work?

That would work as #img:hover, but would then be applied to ALL the images on your site, which is probably not ideal.

If you want it only on iwakami images you can probably edit the iwakami plugin code, you would have to find the part that outputs the image and wrap that in fx.

iwakami image output here

and then create a new class in your css with the styling.

1. .colorhover{
2. background: transparent url(../images/black80.png) repeat;
3. background: rgba(0, 0, 0, 0.8) none; 
4. cursor: pointer;
5. -webkit-transition: all .2s ease-in-out;
6. -moz-transition: all .2s ease-in-out;
7. -o-transition: all .2s ease-in-out;
8. transition: all .2s ease-in-out;
9. } 

OOps, ate my tags, I meant wrap the image output in a span or something.

Okay, will give this a shot (editing the iwakami code). Although I just tried changing the #img:hover and it didn't work... perhaps my hover code is wrong... hmm.

Will let you know how I get on!

Hey Rich, very much untested but worked for me, around line 65 of iwakami I added a class called "imghover" to the link, and added an empty span with the class of "overlay" just before the image. Looks like this (I had to add spaces before and after the Opening/closing tags)

1. $a .= "n< div id='p$i' class='pic' $off >< a href='#' class='imghover' onclick="show_image($next); return false;" >< span class='overlay' >< /span >< img src='" . BASEURL . GIMGS . "/$go[media_file]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot' / >< /a >< p >{$title}< br / >{$caption}< /p >< /div >n";

And then added the styling:

1. a.imghover{
2.  position:relative;
3. }
4. a.imghover:hover .overlay {
5. position:absolute;
6. background: rgba(255, 0, 0, 0.5);
7. cursor: pointer;
8. width: 100%;
9. height: 300px;
10. }

I couldn´t figure out how to set the height though, so right now it´s fixed at 300px, if you sort that let me know.

Hi blameme, this worked a treat - thanks for the help. I now understand it all a bit better so it's really appreciated, my man.

This is really strange about the height. Height has always been a bit problematic with css and things in my experience. I've tried a whole load of different combinations but no success. I can't see the iwakami script causing problems so it must be css/html related.

Brilliant help thhough, man. Thank you.

Hi blameme, this worked a treat - thanks for the help. I now understand it all a bit better so it's really appreciated, my man.

This is really strange about the height. Height has always been a bit problematic with css and things in my experience. I've tried a whole load of different combinations but no success. I can't see the iwakami script causing problems so it must be css/html related.

Brilliant help though, man. Thank you.

No problem, it's probably way better to do this with javascript but I'm a noob.

I think it's better using css... sometimes javascript doesn't run on phones, iphones etc, so it stays clear of danger. I'm more noob.

Hey blameme, and anyone else who was following this. Just a quick update to say that I eventually got this to work. I'm sure it's easy for all you css pros, but you know... and thought it would at least serve well for the forum.

his is what I ended up with in the stylesheet:

1. a img { border: none;
2. }

a.imghover{
position: absolute;
text-decoration: none;
margin-left: 5px;
}
a.imghover:hover .overlay {
position: absolute;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
width: 100%;
height: 100%;
text-decoration: none;
}

and in the .php for the exhibition format (I was using iwakami):

1.  $a .= "n< div id='p$i' class='pic' $off >< a href='#' class='imghover' onclick="show_image($next); return false;" >< span class='overlay' >< /span >< img src='" . BASEURL . GIMGS . "/$go[media_file]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot'  />< /a >< p >{$title}< br / >{$caption}< /p >< /div >n"; 

Also had to change this part in the .php from on line 86:

1. .img-bot { margin-bottom: 12px; }";

to

1. .img-bot { margin-bottom: 0px; }";

Big thanks to blameme, of course!

Cheers,

Rich

Hey Rich, thanks for the update, I might just use this soon.

It does of course, for some reason, not work in IE. I thought CSS was pretty good on IE. Works on chrome, firefox, and safari though!