Bildgalleri Webbdesign
Har just haft en lektion i webbdesign och den här ggn förstod jag faktiskt vad det var jag skulle göra! ;D
Vi skulle göra ett bildgalleri och så här såg mitt ut!
Såhär ser koden ut:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>Mitt bildgalleri!</title>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #009987;
padding: 50px;
width: 510px;
border: 5px dotted #006D66;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #D8A8D8;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #F43FA5;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
</head>
<body>
<h2 id="example">Mitt bildgalleri!</h2>
<p> Det här är ett bildgalleri med bilder på ögon!</p>
<div id="gallery">
<ul>
<li>
<a href="photos/eye1.jpg" title="Blue eyes">
<img src="photos/thumb_eye1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/eye2.jpg" title="Blue and black eye">
<img src="photos/thumb_eye2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/eye3.jpg" title="Green eye">
<img src="photos/thumb_eye3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/eye4.jpg" title="Silver eye">
<img src="photos/thumb_eye4.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/eye5.jpg" title="Blue eye">
<img src="photos/thumb_eye5.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>
</body>
</html>
Och CSS:
/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
body {
background-color: #D36BC6;
}
h2 {
font-family:verdana, sans-serif;
font-size: 40px;
font-weight: bold;
color: #F9AFD3;
}
p {
font-family:verdana, sans-serif;
font-size: 20px;
font-weight: bold;
color: #000000;
}
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}
dock måste man ha själva dokumentet på datorn själv för att kunna se hur det blir! :)
Svar: Ok:) jo det är supergott!
- japp, fast bara en halv.. du då? :)
Hej=O) brukar kika i din blogg
Men nu har jag ett sjukt bra tips till dig, ett nystartat företag som ger dig möjlighet att tjäna pengar på din blogg. Jag tjänade 2400 igår, trodde knappt det var sant när jag såg det idag=O)
Det är skitenkelt, du marknadsför halens, eller frank dandy tex och erbjuder dina läsare rabatter osv
Hör av dig så hjälper jag dig
kram
Jag brukar inte tycka om det, bara de pappa gör. Han blandar grädden med mandelmassan och har inte så mkt i min semla så då funkar det (a)
gud vad snyggt :D
sv: åh tack så mycket :D
Stiligt!: )
Aa! :) <3
sv: allright :D
hur är läget med dej idag då?? :b
p.s glöm inte rösta på mig i mysmatchen, man har en röst om dagen :D
http://www.mysmatchen.se/bidrag/fresh-garlic-chilli
din röst är unik och betyder massor :D
Gå in och ställ någon fråga?! :D<3
http://kmill.blogg.se/2011/march/fraga-mig.html
har en tävling också! vinn två spalampor och mys till det. jättelätt att anmäla sig! :D<3
http://kmill.blogg.se/2011/march/t-a-v-l-i-n-g.html
god eftermiddag hihi :)
tack gumman
jodå. det är ganska gott :)
svar: jaa älska semlor!! :D
allt bra med dig idag btw? :D
Sv; Haha okej :D
sv; haha okej :p jag tkr dom är helt okej, gillar inte mandelmassan eller grädden så jag äter ba brödet (a)
jasså? jag hatar mandelmassan! den är så äcklig! tar bort den :) äter du hela?
kram
Lång sak med grejer man måste ha ;)
Hur mår du idag då? :)
Jasså? :)
Ja, det är många som gillar semlor :)
Haha okej:D Annars allt bra med dig idag?
för att jag inte är intresserad;)
sv: neej usch :p haha. allt bra idag?
svar: haha, jag gillar inte semlor xD
sv: ja de är gott ! :D<3
Ojdå;) Vilken ;gulp, KORT instruktion;) Näe, hihi, tjejen med sbart bälte i, just det, SHOPPINGm såå göllit!:D<3 Hittas på?:) Kram//FeliciaHerman (www.muffinskram.blogg.se)
Okej:D
Jag är femton:D
sv: hehe okej :D
sv:äääälskar också semlor!
hade gött!
kram!<3
ahhaa, nää. fett vidrigt! ;)
åh webbdesign är så himla roligt, men svårt! läste de när jag gick på gymnasiet :)
