PDA

Click to See Complete Forum and Search --> : adding full screen

GoverNment
07-13-2008, 07:43 PM
hello, im designing a photo album with thumbnails and when you click on the thumbnails it stays on the screen, i was looking on how to make it open full screen option somewhere, i tried googling it, but most of them seem to be for their own gallery any help is appreciated
GoverNment
07-13-2008, 11:38 PM
couldn't edit but here is the code im working with

and i need to add a description spot on full screen.. i need the close full screen on the bottom of image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Gallery</title>
<meta name="Author" content="Zach DiBeradin" />




<style type="text/css">

#gallery {width:728px; height:380px; padding:10px; border:1px solid #333; background: #888; float:center; }
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
</style>


</head>



<div id="gallery">


<b class="default" ><img src="#water splash1.jpg" title="images/watersplash.jpg" alt="" /><span>This is the default image with some descriptive text</span></b>
<ul>

<li><a href="#watersplash"><b><img src="images/watersplash.jpg" title="" alt="" /><span>This is a water splash</span></b></a></li>
<li><a href="#A.O. Smith Water Heater"><b><img src="images/resmontage.jpg" title="" alt="" /><span>A.O Smith water heaters</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t3.jpg" title="" alt="" /><span>Descriptive text can be placed below the image</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t4.jpg" title="" alt="" /><span>You can style the descriptive text as you like</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t5.jpg" title="" alt="" /><span>Place the descriptive text in a span tag</span></b></a></li>

<li><a href="#nogo"><b><img src="trees/t6.jpg" title="" alt="" /><span>Photograph descriptive text here</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t7.jpg" title="" alt="" /><span>Here is where you put the descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t8.jpg" title="" alt="" /><span>Add the desriptive text below the photograph</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t9.jpg" title="" alt="" /><span>The descriptive text can be as long as you like. If it extends too far then it will wrap onto a second line</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t10.jpg" title="" alt="" /><span>Short descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t11.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>

<li><a href="#nogo"><b><img src="trees/p1.jpg" title="" alt="" /><span>Describe the photograph here</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t13.jpg" title="" alt="" /><span>The description goes here</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t14.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t15.jpg" title="" alt="" /><span>Description</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t16.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>
<li><a href="#nogo"><b><img src="trees/t17.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>

<li><a href="#nogo"><b><img src="trees/t18.jpg" title="" alt="" /><span>Descriptive text</span></b></a></li>

</ul>
Fang
07-14-2008, 01:54 AM
Explain "full screen" how, where and visual layout.
GoverNment
07-14-2008, 09:23 AM
Explain "full screen" how, where and visual layout.

okay here is the link to the code im using, and the example of it
(http://www.cssplay.co.uk/menu/photo_not_so_simple)

as you see when you click on the image it stays up in a bigger photo, and i want to add the option to make it full screen under the bigger photo(not the thumbnails) and then with full screen i would like to add a description under it
slaughters
07-14-2008, 11:44 AM
You can not really open a window full screen (ie like when hitting F11 in the IE browser)

The absolute best you can do is to open a pop-up window the current monitors height and width. Even then the top task bar and bottom status bars will still show up.


<script type="text/javascript">
<!--
function popup(url)
{
params = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';

newwin=window.open(url,'windowname4', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>

<a href="javascript: void(0)"
onclick="popup('popup.html')">Fullscreen popup window</a>
GoverNment
07-14-2008, 12:41 PM
You can not really open a window full screen (ie like when hitting F11 in the IE browser)

The absolute best you can do is to open a pop-up window the current monitors height and width. Even then the top task bar and bottom status bars will still show up.


<script type="text/javascript">
<!--
function popup(url)
{
params = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';

newwin=window.open(url,'windowname4', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>

<a href="javascript: void(0)"
onclick="popup('popup.html')">Fullscreen popup window</a>



thanks thats what i was looking for. didn't mention it correctly tho. thanks alot, but how would i add the full screen option to every picture and place the full screen option under the description.