Page 1 of 1
Change page background colour per image?
Posted: Wed Mar 03, 2010 8:17 am
by herbshirt
Hey Guys,
I have a potential client who has a Flash site and realises the need to go the cms/html route. However, they are really passionate about the fact that with their Flash site they can change the background colour for each image (
http://turnerphotography.com.au/).
I'd like to use something like:
http://spaceforaname.com/gallery-dark.html to take care of the gallery animation but is it possible to setup a field somehow, somewhere so they can change the div bg colour for each image?
All suggestions appreciated.
Herb.
Re: Change page background colour per image?
Posted: Wed Mar 03, 2010 12:00 pm
by uniqu3
Maybe you could use the jquery wrap function. But this would mean you would need to add appropriate class to each image.
See jquery documentation
http://api.jquery.com/wrap/
Re: Change page background colour per image?
Posted: Thu Mar 04, 2010 12:06 pm
by hexdj
You can definitively do this with jQuery,
See the following example that I wrote really quickly:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html>
<head>
<style type="text/css" media="all">
body {
background:#C8C8C8;
color:white;
font:28px/36px lighter Georgia,serif;
}
</style>
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function(){
$('#color1').click(function(){
$('body').css("background-color","#CFDEDE");
});
$('#color2').click(function(){
$('body').css("background-color","#D6E4C5");
});
$('#color3').click(function(){
$('body').css("background-color","#F4CAEF");
});
});
</__script>
</head>
</__body>
<ul>
<li><a id="color1" href="#">One</a></li>
<li><a id="color2" href="#">Two</a></li>
<li><a id="color3" href="#">Three</a></li>
</ul>
<__body>
</__html>
Paste it all in a new html file and open with your browser, since I am using google hosted jquery in this example it will work for you. Again, it's a basic example of stuff you can do with jQuery.
Re: Change page background colour per image?
Posted: Thu Mar 04, 2010 10:04 pm
by herbshirt
Wow, now thats cool! worked a treat.
So would you be able to have a field possibly somewhere within the image manager? SO you choose an image > then then choose the colour? Then in the Front end as the images change from one to another the bg image changes with it?
Re: Change page background colour per image?
Posted: Fri Mar 05, 2010 12:18 am
by hexdj
Don't think you can do it with Image Manager, because there's no way for you to add custom fields in there. But you might be able to use the Gallery module and adapt if, using the Comment / Description fields.
Gallery module is awesome by the way
