I’m creating a site for a client that uses the Colorbox script for the store. When you click on a thumbnail of a product in the store, the browser uses Colorbox to display the external PHP page with the product information.
This all works fine but what I would like to do is…
When you click on a product thumbnail and it brings up the page (using Colorbox), when you close the Colorbox window and return to the thumbnails, I would like the padded background of the image to be a different color and not grey like the rest of them - so you can see which products you have looked at and which products you haven’t.
Hi, it won’t work like that :). The image can’t have a background because that’s the content of it. If you add padding around the image it would show but not like that.
How about giving opacity? It’ll grey it out and gives a nice effect.
with the proviso that you go through and change the repeated instances of id=“productContainer” to class=“productContainer” (and obviously change the # to . in the CSS), as you’re only allowed to use each ID once in a page, not 30 times, and that could cause some browsers to have a hissy fit and not work properly.
The key point is that only <a> elements can take :link, :active, :hover or :visited pseudo-classes, so you need to target a:visited, but because the <a> element doesn’t enclose the <img>, the colour needs to be applied to the <img> inside the <a>.[/FONT]
[FONT=Verdana]A word of warning! The method I’ve used will change the colour of a link where the destination page has been visited. It doesn’t change the colour of links that are clicked on. There is a subtle difference – if someone has visited the destination page for one of those links already, it will come up with the :visited colour, whether or not they’ve clicked on that specific link to get there. So at the moment, click on one and they’ll all change, because they’re all pointing to the same destination.
If you want them to change only when that particular link is clicked on, just add something like <a href=“assets/store/A31.php?clickid=1”> and use a different number on each one. That will fool the browser into thinking that each link points to a different page, without actually affecting the destination.[/FONT]
I’ve changed the div id’s to classes - well spotted, thank you!
Then I tried both your suggestions but it didn’t work when I tested the site. I have a feeling that, despite the fact that the user has clicked on the link, as it’s only a colorbox (and the browser isn’t going to the page in its window), the browser isn’t resgitering it as a ‘visited’ link.
That’s why I think PHP may have an answer, or do you guys reckon it can be done in CSS?
For whatever reason, the :visited state isn’t allowing opacity to be set on it. It’s certainly registering the visited pseudo class however, don’t get me wrong :).
Unless you’d be willing to add an HTML <span> into the mix and call onto that to provide the transparency, I doubt you’ll get this working with CSS alone. PHP may need to be tried unless you want to bloat your HTML to achieve the effect.
Alternatively, could you just create a separate version of hte image in photoshop and apply opacity there? Should take seconds. If you have too many dynamic images tehre, perhaps it’s not feasible.
The image can’t have a background because that’s the content of it. If you add padding around the image it would show but not like that.
I wanted to clarify Ryan’s statement. IMGs can have BG. But IMGs are replaced content , so the image file will be placed inside the tag and fill up the space, covering up the BG color… UNLESS you add padding.
BONUS CLARIFICATION: you can even add a BG image to an IMG tag!!!
As Stive D pointed out, the :visited pseudo class only applies to links. Kinda makes sense, how could you have visited an IMG? So you have to target it via a cascade.
MOST IMPORTANTLY…
The ORDER in yoru CSS in pivotal when dealing with these pseudo classes. I use the mnemonic:LoVeHAte to remeber the order.
Thanks for checking that out - what browser are you using? I just tested it in FF, ie, Chrome and Safari, and the thumbnail doesn’t appear bright green (I will change that, just for test purposes!) when I click it and bring up the lightbox.
Am I being an idiot?! - it wouldn’t surprise me if I was
Chrome. If I remove the image for testing purposes and just try having a regular text link there, and set a :visited state, after the click, I can see the visited state being put into effect. The opacity just doesn’t want to happen.
