lightbox

Status
Niet open voor verdere reacties.

revange1

Gebruiker
Lid geworden
9 jan 2012
Berichten
41
Hallo,

Dit is mischien een rare vraag,
maar hoe krijg ik lightbox geinstalleert?

Snap het eigenlijk niet. volg een tutorial.

http://www.alphamegahosting.com/sitecoach/plaats-een-fotoalbum-over-je-website-met-lightbox.html

dan staat er bij stap 1 en 2 dat ik dat in de [head][/head] van de site moet zetten.
ik wil die in mijn url portofofolio hebben.

Dus dan gooi ik die zinnen erin.

stap 3 upload ik gewoon die map images in me root.

stap 4, afbeeldingen activeren?

moet ik dat dan bij elke afbeelding doen?

En op het allerlaatst zegt ie dat in de html file ook moet uploaden.
Maar heb al een index.html van de website. dus dan zou ik er 2 moeten hebben, en dat gaat niet.

gr
 
Lightbox tutorial

Hoi revange1,
Hm, gevonden tutorials op internet kunnen gevaarlijk zijn!
De Lightbox waar in de tutorial van 2007 over gesproken wordt is Lightbox 2.0. :rolleyes:
Maar intussen zit Lightbox op versie Lightbox 2.51, en die heeft heel andere download-bestanden en werkt anders!


  • In elk geval moet je niets met je index.html doen, want daar moet de lightbox niet op komen!

VERSE TUTORIAL:


  1. Je maakt in Dreamweaver (vanuit de root) een map aan met de naam js.
    In die map zet je de bestanden jquery-1.7.2.min.js en lightbox.js, die je van de Lightbox-site hebt gedownload.

  2. Je maakt in Dreamweaver (vanuit de root) een map aan met de naam css.
    In die map zet je het bestand lightbox.css, dat je van de Lightbox-site hebt gedownload.

  3. Je maakt in Dreamweaver (vanuit de root) een map aan met de naam images.
    In die map zet je de afbeeldingen prev.png, next.png, loading.gif en close.png, die je van de Lightbox-site hebt gedownload.

Zit een map met zo'n naam al in je site, dan hoeven alleen de bestanden er in gezet te worden.
Hiermee zijn de voorbereidingen getroffen. Nu het echte werk!


  1. Je opent in Dreamweaver je portfolio-pagina.
  2. Je gaat naar de code weergave.
  3. Je zoekt op waar </head> in de code staat, en daar vlak boven zet je de regel (ervan uitgaande dat de portfolio-pagina ook in de root staat):
    HTML:
    ...
    <link href="css/lightbox.css" rel="stylesheet" />
    </head>
    <body>
    ... enz.
  4. Je gaat naar helemaal het eind van de pagina, waar </body></html> in de code staat, en daar vlak boven zet je de regels:
    HTML:
    ...
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>
    </body>
    </html>
  5. Je gaat naar waar je de kleine afbeeldingen (thumbnails) op de pagina hebt gezet. Daar staat bv.
    <img src="images/portfolio1-klein.png">

  6. Daar maak je een link van naar de plaats waar de vergroting staat, bv.:
    <a href="images/portfolio1-groot.jpg"><img src="images/portfolio1-klein.png"></a>

  7. Dan zet je erbij dat deze link met Lightbox geopend moet worden:
    <a rel="lightbox" href="images/portfolio1-groot.jpg"><img src="images/portfolio1-klein.png"></a>

  8. Als het een serie wordt met volgende/vorige, dan zet je er een naam voor de serie bij, bv.:
    <a rel="lightbox[serie1]" href="images/portfolio1-groot.jpg"><img src="images/portfolio1-klein.png"></a>

Dit doe je met alle afbeeldingen op de portfolio-pagina die je in de lightbox geopend wilt hebben.
Daarna kan je de gewijzigde portfoliopagina (en alle toebehoren-bestanden) uploaden naar de server.
Klaar! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Oke, ik zal het vanavond even proberen, bedankt voor je reactie!
En als ik het goed begrijp dan moet ik al mijn afbeeldingen veranderen in thumbnail afmetingen? En dan die al op mijn portofolio site zetten?

Gr
 
Laatst bewerkt:
Ja, dat is mogelijk, anders kon het bij etemf.nl ook niet. :P
Dus toch nog maar een 1 vraag: hoe dan? ;)

Door aan de images een kleine padding (opvulling) mee te geven (daar is 4px gebruikt).
Het rechthoekje om de afbeelding is een border, daar: {border: 1px solid #A9A9A9;}.

Waar het image niet zit, is er dus de achtergrondkleur. Als die niet is opgegeven, is ie transparant: dezelfde background-kleur als het element waar de afbeelding in zit.
Vervolgens geef je opdracht om bij een hover de background-kleur van de thumbnails te veranderen in hoe deze moet worden opgelicht.


  • Desgewenst kan je bij een hover ook de achtergrondkleur hetzelfde laten en de borderkleur veranderen.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Oke bedankt voor je reactie,
en ik kan die {border: 1px solid #A9A9A9;} zo ergens in mijn files plakken?
sorry maar heb niet zoveel kennis op dit gebied.
 
Nee, met "zomaar ergens in plakken" zal het zomaar fout gaan. ;)

Het moet bij de andere style-regels komen te staan, en worden vastgeknoopt aan het element waar de thumbnail-plaatjes in zitten.
Als bv. in de html staat:
HTML:
<div id="thumbnail-box">
    <a rel="lightbox" href="images/portfolio1-groot.jpg"><img src="images/portfolio1-klein.png"></a>
    ... enz.
</div>
... dan moet het in de css bv. worden:
Code:
#thumbnail-box a img {
    padding: 4px;
    border: 1px solid #A9A9A9; /* gewone kleur randje */
    }
#thumbnail-box a:hover img {
    border: 1px solid green;   /* hover-kleur randje */
    }
 
oke dus als ik het goed begrijp:

Code:
* { margin: 0; padding: 0; }
a { text-decoration: none; }
img { outline: none; border: none; }

h1 { position: relative; width: 100%; height: 37px; font-size: 18px; font-weight: bold; line-height: 37px; color: #090909; }
h1.border { border-bottom: 6px solid #090909; }

html, body { width: 100%; height: auto; background: #f4f4f4; font-family: Arial, Helvetica, sans-serif; }
body { position: relative; border-top: 17px solid #e2e2e2; }

	#wrapper { position: relative; width: 960px; height: auto; margin: 0 auto; }
		#navigation { position: relative; width: 100%; height: 138px; border-bottom: 1px solid #c0c0c0; }
			#headerLogo { position: relative; top: 23px; left: 1px; }
			#navigation ul { position: absolute; top: 51px; right: -30px; }
				#navigation ul li { position: relative; list-style: none; float: left; }
					#navigation ul li a { display: inline-block; font-size: 12px; color: #acacac; font-weight: bold; height: 42px; line-height: 42px; text-align: center; }
					#navigation ul li a:hover { color: #ffffff; }
					#navigation ul li .active { color: #ffffff; }
						#navigation ul li #home { width: 96px; }
						#navigation ul li #over-ons { width: 123px; }
						#navigation ul li #diensten { width: 120px; }
						#navigation ul li #fotos { width: 104px; }
						#navigation ul li #leveranciers { width: 154px; }
						#navigation ul li #contact { width: 117px; }
						
		#header { position: relative; width: 100%; height: 305px; border-bottom: 1px solid #c0c0c0; margin-top: 19px; }
			#bekijkPortfolio { position: absolute; display: block; width: 282px; height: 51px; top: 49px; left: 619px; border: 1px solid #ffffff; border-radius: 10px; font-family: "Myriad Pro", Helvetica, sans-serif; font-size: 20px; color: #ffffff; text-align: center; line-height: 50px;
				background: #5f91ce;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7eb4f7', endColorstr='#3c69a0');
				background: -webkit-gradient(linear, left top, left bottom, from(#7eb4f7), to(#3c69a0));
				background: -moz-linear-gradient(top,  #7eb4f7, #3c69a0); }	
			#bekijkPortfolio:hover {
				background: #abc4e3;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9d4f6', endColorstr='#98aeca');
				background: -webkit-gradient(linear, left top, left bottom, from(#b9d4f6), to(#98aeca));
				background: -moz-linear-gradient(top,  #b9d4f6, #98aeca); }
				
		#content { position: relative; margin-top: 21px; border-bottom: 1px solid #c0c0c0; padding-bottom: 50px; }
			#content p { font-size: 12px; color: #5d5d5d; width: 940px; margin: 25px 0 0 13px; line-height: 20px; }
			
		#recenteFotos { position: relative; border-bottom: 1px solid #c0c0c0; padding-bottom: 30px; margin-top: 11px; }
			.rFoto { position: relative; cursor: pointer; float: left; margin: 30px 45px 0 18px; width: 180px; height: 134px; -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); }
			.rFoto.last { margin-right: 20px; }
				.rFoto img { z-index: 9; }
				.rHover { position: absolute; display: none; width: 180px; height: 134px; z-index: 10; }
					.rHoverBG { position: absolute; width: 180px; height: 134px; background: #ffffff; -moz-opacity:.50; filter:alpha(opacity=50); opacity: .50; }
					.rHover span { position: absolute; display: inline-block; text-align: center; line-height: 50px; margin: 44px 18px; width: 143px; height: 53px; background: url(../img/navHovers/bekijk.png) no-repeat; font-size: 16px; color: #ffffff; font-weight: bold; }
					
		#footer { position: relative; width: 100%; height: 101px; background: #e2e2e2; margin-top: 36px; }
			#footerWrapper { position: relative; width: 960px; height: 101px; margin: 0 auto; }
				#footerWrapper ul { position: relative; top: 32px; }
					#footerWrapper ul li { position: relative; list-style: none; float: left; font-size: 12px; color: #5d5d5d; margin-right: 8px; }
						#footerWrapper ul li a { font-size: 12px; color: #5d5d5d; }
						#footerWrapper ul li a:hover { text-decoration: underline; }
				#footerWrapper p { position: relative; font-size: 12px; color: #5d5d5d; top: 32px; }
				#footerLogo { position: absolute; right: 0; top: 12px; }

dus dat word

Code:
* { margin: 0; padding: 0; }
a { text-decoration: none; }
img { outline: none; border: none; }

h1 { position: relative; width: 100%; height: 37px; font-size: 18px; font-weight: bold; line-height: 37px; color: #090909; }
h1.border { border-bottom: 6px solid #090909; }

html, body { width: 100%; height: auto; background: #f4f4f4; font-family: Arial, Helvetica, sans-serif; }
body { position: relative; border-top: 17px solid #e2e2e2; }

	#wrapper { position: relative; width: 960px; height: auto; margin: 0 auto; }
		#navigation { position: relative; width: 100%; height: 138px; border-bottom: 1px solid #c0c0c0; }
			#headerLogo { position: relative; top: 23px; left: 1px; }
			#navigation ul { position: absolute; top: 51px; right: -30px; }
				#navigation ul li { position: relative; list-style: none; float: left; }
					#navigation ul li a { display: inline-block; font-size: 12px; color: #acacac; font-weight: bold; height: 42px; line-height: 42px; text-align: center; }
					#navigation ul li a:hover { color: #ffffff; }
					#navigation ul li .active { color: #ffffff; }
						#navigation ul li #home { width: 96px; }
						#navigation ul li #over-ons { width: 123px; }
						#navigation ul li #diensten { width: 120px; }
						#navigation ul li #fotos { width: 104px; }
						#navigation ul li #leveranciers { width: 154px; }
						#navigation ul li #contact { width: 117px; }
						
		#header { position: relative; width: 100%; height: 305px; border-bottom: 1px solid #c0c0c0; margin-top: 19px; }
			#bekijkPortfolio { position: absolute; display: block; width: 282px; height: 51px; top: 49px; left: 619px; border: 1px solid #ffffff; border-radius: 10px; font-family: "Myriad Pro", Helvetica, sans-serif; font-size: 20px; color: #ffffff; text-align: center; line-height: 50px;
				background: #5f91ce;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7eb4f7', endColorstr='#3c69a0');
				background: -webkit-gradient(linear, left top, left bottom, from(#7eb4f7), to(#3c69a0));
				background: -moz-linear-gradient(top,  #7eb4f7, #3c69a0); }	
			#bekijkPortfolio:hover {
				background: #abc4e3;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9d4f6', endColorstr='#98aeca');
				background: -webkit-gradient(linear, left top, left bottom, from(#b9d4f6), to(#98aeca));
				background: -moz-linear-gradient(top,  #b9d4f6, #98aeca); }
                                          [b]#bekijkPortofolio a img {
    padding: 4px;
    border: 1px solid #A9A9A9; /* gewone kleur randje */
    }
#bekijkPortofolio a:hover img {
    border: 1px solid green;   /* hover-kleur randje */
    }[/b]
				
		#content { position: relative; margin-top: 21px; border-bottom: 1px solid #c0c0c0; padding-bottom: 50px; }
			#content p { font-size: 12px; color: #5d5d5d; width: 940px; margin: 25px 0 0 13px; line-height: 20px; }
			
		#recenteFotos { position: relative; border-bottom: 1px solid #c0c0c0; padding-bottom: 30px; margin-top: 11px; }
			.rFoto { position: relative; cursor: pointer; float: left; margin: 30px 45px 0 18px; width: 180px; height: 134px; -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); }
			.rFoto.last { margin-right: 20px; }
				.rFoto img { z-index: 9; }
				.rHover { position: absolute; display: none; width: 180px; height: 134px; z-index: 10; }
					.rHoverBG { position: absolute; width: 180px; height: 134px; background: #ffffff; -moz-opacity:.50; filter:alpha(opacity=50); opacity: .50; }
					.rHover span { position: absolute; display: inline-block; text-align: center; line-height: 50px; margin: 44px 18px; width: 143px; height: 53px; background: url(../img/navHovers/bekijk.png) no-repeat; font-size: 16px; color: #ffffff; font-weight: bold; }
					
		#footer { position: relative; width: 100%; height: 101px; background: #e2e2e2; margin-top: 36px; }
			#footerWrapper { position: relative; width: 960px; height: 101px; margin: 0 auto; }
				#footerWrapper ul { position: relative; top: 32px; }
					#footerWrapper ul li { position: relative; list-style: none; float: left; font-size: 12px; color: #5d5d5d; margin-right: 8px; }
						#footerWrapper ul li a { font-size: 12px; color: #5d5d5d; }
						#footerWrapper ul li a:hover { text-decoration: underline; }				#footerWrapper p { position: relative; font-size: 12px; color: #5d5d5d; top: 32px; }
				#footerLogo { position: absolute; right: 0; top: 12px; }


En maakt het ook uit hoe de regels staan, heeft dat een reden waarom het niet op 1 lijn staat?
het vetgedrukte heb ik erin gezet.
 
Hoi revange1,
Ja, dat ziet er volgens mij wel goed uit. Heb je het al geprobeerd, en werkt het? ;)

Het inspringen is niet persé noodzakelijk.
Dat kan je doen in samenhang met de html-structuur (de DOM-stamboom): dan zie je precies welk element binnen welk ander element zit.
Is op zich wel netjes, maar hoeft dus niet.

Ikzelf ben er te lui voor. :)

Met vriendelijke groet,
CSShunter
 
Ik heb het er nu ingezet maar het werkt niet. moet ik dan niks aanpassen in mijn portofolio.html?

en je hebt wel meer overzicht als je het in een mooie structuur zet ja.
 
Hoi revange1,
Als het niet werkt, heb je dan een link naar de (test) portfolio-pagina?
Dan kunnen we eens kijken of we zien wat er scheef zit.

Met vriendelijke groet,
CSShunter
 
Hij werkt, bedankt!

en heb ik nog een vraag.

als je in dreamweaver een tabel maakt dan word de tekst zwart.
alsof die dan de css van de site niet kent ofzo.

hoe kan ik dat allemaal hetzelfde krijgen?

en je ziet dan de lijnen om de tabel, en die moeten transparant worden.
 
Laatst bewerkt:
Hoi revange1,
Alweer: zien, die site! :P

Zonder de complete code te zien, is het onmogelijk om vast te stellen waar 't 'm in zit, en wat daaraan gedaan kan worden.
Linkje?

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan