PDA

View Full Version : CSS Gallery Persistence?



TheJoshMan
08-08-2008, 12:30 AM
1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb

3) Describe problem: Not a problem YET per se, just curious as to whether or not this could be implemented in such a way that each larger image and description would stay put once the thumbnail is clicked. Is it possible to make it so that once someone clicks the thumbnail the enlarged <span> containing the larger image and description would stay in place until another thumbnail was hovered over?

Just curious. Thanks.

rangana
08-08-2008, 01:04 AM
Apparently, there's no easy way to do this via CSS alone, but with JS, might be possible.
See post # 4 for possibility.

TheJoshMan
08-08-2008, 01:10 AM
Oops! I guess I thanked too soon! LOL
Yes, I was quite expecting it to have to be done via javascript... I just wasn't quite sure how or IF it was actually possible.

rangana
08-08-2008, 01:19 AM
How about giving me a chance to give you these steps:

Try to add this element in your markup


<div id="hold"></div>


Add this in your CSS:


#hold{
position: absolute;
padding: 5px;
left: 240px;
color: black;
text-decoration: none;
z-index:10000;
}


Have this script:


<script type="text/javascript">
window.onload=function(){
for(var i=0,a=document.getElementsByTagName('a');i<a.length;i++)
{
if(a[i].className=='thumbnail'){
a[i].onclick=function(){
var hold=document.getElementById('hold');
hold.innerHTML=this.getElementsByTagName('span')[0].innerHTML;
hold.style.background='lightyellow';
hold.style.border='1px dashed gray';
return false;
}
a[i].onmouseover=function(){
document.getElementById('hold').innerHTML='';
hold.style.background='none';
hold.style.border='0px';
}
}
}
}
</script>

and have some beer


See the mess.

TheJoshMan
08-08-2008, 01:35 AM
muy bueno senor... Very much appreciated. Works like a charm. Thank you very much.

student101
11-10-2008, 08:07 AM
How about giving me a chance to give you these steps:
This has helped, but need to change it back to the default when mouse-out or mouse-off.


If this was the contact us page then the default image would be ;
<div id="hold"><img src="img/contactus.jpg" /><br />Contact us.</div>
You mouse-over to see other images when you mouse-out it resets to the default image.


Do I add;
a[i].onmouseout=function(){

Is there a method to show the default image of that page?


Solved with javascript;
==
function showIt(imgsrc){
document.getElementById('imgshow').src=imgsrc;
}

function hideIt(){
document.getElementById('imgshow').src="images/contact.jpg";
}
==

Thanks, cheers.