Tijden veranderen
Vergroting bij onmouseclick
Ik ben op zoek naar hoe ik het volgende kan maken: Zodra je op een afbeelding klikt wordt die vergroot en gebeurt er een fade-out bij de zijkanten van de pagina inclusief kruisje om de pagina te sluiten.
Op google kon ik al wat vinden. Maar niet iets dat ik in mijn eigen pagina kan plakken.
Heeft iemand hier een voorbeeld? Dus een afbeelding en dan het script waarbij het vergroot wordt?
Alvast bedankt.
Toevoeging op 01/04/2013 20:41:38:
Waarom werkt Jqueri niet?
Ik krijg in mijn browser gewoon de gemaakte code?
Gewijzigd op 01/04/2013 20:41:30 door Jan Nada
Maar zoek je niet gewoon iets zoals Fancybox ofzo?
Zoals je ziet genereert mijn browser de code niet automatisch naar het juiste script. Ik krijg enkel de code die ik van een tutorial site heb gekopieërd.
Ik heb meerdere tutorial sites geprobeerd, telkens weer geen goede uitgave.
Wat doe ik fout?
Je weet wat HTML is, en wat JavaScript/jQuery is?
Maar waarom zetten ze zoiets dan in een tutorial?
Kun je me aub zeggen hoe het wel moet?
Html, php en css beheers ik zo goed als volledig, javascript half. jQuery begin ik mee.
Dus hoe moet het wel?
Gewijzigd op 02/04/2013 10:05:46 door Jan Nada
En je zegt zelf. HTML, php en CSS beheer ik zo goed als volledig. Ga nou niet lopen pochen, waarschijnlijk werk je er een week mee en denk je nu alles te kunnen. Als je echt HTML en CSS volledig zou beheersen dan wist je dat je nu gewoon een HTML pagina zat te maken en dat je dat dus op moet slaan als .html en niet als .js... Oftewel gewoon deze pagina opslaan als .html...
- Offtopic -
En ja, ik heb hekel aan mensen die zeggen dat ze 'zo goed als volledig' HTML/CSS beheersen terwijl ze zoveel dingen fout of incorrect doen. Zie dit dagelijks in de praktijk
Daarbij werken de functies niet. Hoe kan ik dat verhelpen?
@Hertog Jan: Html beheers ik inderdaad volledig. Css kan ik ook goed uitschrijven. Hoe heb ik anders al meerdere sites gemaakt? Contacteer me via een privé bericht gerust om te zien over welke sites het gaat.
Php ken ik ook. Ik ben in het totaal al veel langer dan een jaar bezig met deze talen, dus het komt over als een belediging.
Die tutorial komt trouwen van w3schools. Inderdaad, ik het verkeerd opgeslagen, iedereen kan fouten maken. Zelf nu ik het met .html opsla doet die het nog niet.
Dus als je me nu beschouwt als een leugenaar wil ik je gerust wat dingen opsturen, maar dan wel via privé bericht.
@Albert: Bedankt. Zal ik zeker eens naar kijken.
@Iedereen: Waar kan ik een jQuery script in plaatsen? Waar moet die staan?
Laat anders eens zien wat je hebt?
Thomas Korthals op 02/04/2013 10:52:31:
Ik heb het ook eens opgeslagen als .html
Daarbij werken de functies niet. Hoe kan ik dat verhelpen?
@Hertog Jan: Html beheers ik inderdaad volledig. Css kan ik ook goed uitschrijven. Hoe heb ik anders al meerdere sites gemaakt? Contacteer me via een privé bericht gerust om te zien over welke sites het gaat.
Php ken ik ook. Ik ben in het totaal al veel langer dan een jaar bezig met deze talen, dus het komt over als een belediging.
Die tutorial komt trouwen van w3schools. Inderdaad, ik het verkeerd opgeslagen, iedereen kan fouten maken. Zelf nu ik het met .html opsla doet die het nog niet.
Dus als je me nu beschouwt als een leugenaar wil ik je gerust wat dingen opsturen, maar dan wel via privé bericht.
@Albert: Bedankt. Zal ik zeker eens naar kijken.
@Iedereen: Waar kan ik een jQuery script in plaatsen? Waar moet die staan?
Daarbij werken de functies niet. Hoe kan ik dat verhelpen?
@Hertog Jan: Html beheers ik inderdaad volledig. Css kan ik ook goed uitschrijven. Hoe heb ik anders al meerdere sites gemaakt? Contacteer me via een privé bericht gerust om te zien over welke sites het gaat.
Php ken ik ook. Ik ben in het totaal al veel langer dan een jaar bezig met deze talen, dus het komt over als een belediging.
Die tutorial komt trouwen van w3schools. Inderdaad, ik het verkeerd opgeslagen, iedereen kan fouten maken. Zelf nu ik het met .html opsla doet die het nog niet.
Dus als je me nu beschouwt als een leugenaar wil ik je gerust wat dingen opsturen, maar dan wel via privé bericht.
@Albert: Bedankt. Zal ik zeker eens naar kijken.
@Iedereen: Waar kan ik een jQuery script in plaatsen? Waar moet die staan?
Ik beschouw je niet als een leugenaar, alleen je hoeft jezelf niet de hemel in de praten met 'beheers het volledig'. Ja je kunt websites bouwen, maar maak je gebruik van goede HTML. Hoogst waarschijnlijk niet als ik jou zo hoor praten. Iedereen moet leren, iedereen moet ergens beginnen. Maar begin niet met 'beheers het volledig' want daar irriteer ik me mateloos aan.
En wat betreft waar kun je een jQuery plaatsen? Weet je wat jQuery is? Dat is javascript en jij kon javascript toch half? Dan had je wss wel geweten dat je dit gewoon in een apart .js bestand kan doen en dat kunt inladen via <script type="text/javascript" src="hier_je_linkje"></script> of gewoon in de pagina zelf via <script type="text/javascript">hier_je_scriptje</script>.
En het is verder niks persoonlijks hoor ;-) 9 van de 10 mensen zeggen dat ze HTML/CSS volledig beheersen terwijl ze alleen de basis een klein beetje kennen ;-) Als je wilt mag je via pm best wel wat sites sturen kan ik even kijken of ik gelijk heb en of 1 van ons nog wat kan leren :-)
Je zal wel gelijkt hebben over mijn niveau, ik hoorde wel iets van dat jQuery javascript is. Maar echt erover nadenken...
Bedankt, ik zal het eens proberen.
Maar als jij zegt dat je het volledig beheerst gaan we er van uit dat je ook weet waar je overpraat. Dan komen wij met oplossingen/teksten waar je wss niet eerder van hebt gehoord omdat wij er van uit gaan dat jij weet waar wij het over hebben. Als je nou gewoon zegt ik heb een beetje ervaring dan komen wij eerder met Jip en Janneke oplossingen/teksten waardoor we je wss beter kunnen helpen.
Maar ik heb je een privé bericht gestuurd.
Ik zal je argumenten die je via privé bericht hebt gestuurd zeker grondig bekijken en waar nodig ook toepassen.
Ik loop nu alweer vast. Ik zal straks wel even posten met wat precies.
Nogmaals hartelijk bedankt.
Toevoeging op 02/04/2013 13:58:59:
jQuery werkt nu, inderdaad een aantal stomme fouten.
Ach ja. Nu heb ik dus het volgende:
Dit is de html, inclusief jQuery code (opgelsagen als .html)
Quote:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MoneyHoppers - Homepage</title>
<link href="style5.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/squey.scrollTo.js"></script>
<script src="js/jquery/localscroll.js">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("slideshow-nav a[href=#fotobar1]").addClass("active");
$("#slideshow-nav").localscroll({
target:'#slideshow-nav a").click(function(){
$("#slideshow-nav a").removeClass("active");
$(this).addClass("active");
});
});
</script>
<div id="slideshow">
<ul>
<li id="anonce1"><a href="#"><img src="images/fotobar1.png" alt="Cool" /></a></li>
<li id="anonce2"><a href="#"><img src="images/fotobar2.png" alt="Groen" /></a></li>
<li id="anonce3"><a href="#"><img src="images/fotobar3.png" alt="Geel" /></a></li>
<li id="anonce4"><a href="#"><img src="images/header3.jpg" alt="Rood" /></a></li>
<li id="anonce5"><a href="#"><img src="images/Rand2.jpg" alt="Warm" /></a></li>
</ul>
</div>
<div id="slideshow-nav">
<ul>
<li><a href="#anonce1">Afbeelding 1</a></li>
<li><a href="#anonce2">Afb. 2</a></li>
<li><a href="#anonce3">Afb. 3</a></li>
<li><a href="#anonce4">Afb. 4</a></li>
<li><a href="#anonce5">Afb. 5</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>MoneyHoppers - Homepage</title>
<link href="style5.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/squey.scrollTo.js"></script>
<script src="js/jquery/localscroll.js">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("slideshow-nav a[href=#fotobar1]").addClass("active");
$("#slideshow-nav").localscroll({
target:'#slideshow-nav a").click(function(){
$("#slideshow-nav a").removeClass("active");
$(this).addClass("active");
});
});
</script>
<div id="slideshow">
<ul>
<li id="anonce1"><a href="#"><img src="images/fotobar1.png" alt="Cool" /></a></li>
<li id="anonce2"><a href="#"><img src="images/fotobar2.png" alt="Groen" /></a></li>
<li id="anonce3"><a href="#"><img src="images/fotobar3.png" alt="Geel" /></a></li>
<li id="anonce4"><a href="#"><img src="images/header3.jpg" alt="Rood" /></a></li>
<li id="anonce5"><a href="#"><img src="images/Rand2.jpg" alt="Warm" /></a></li>
</ul>
</div>
<div id="slideshow-nav">
<ul>
<li><a href="#anonce1">Afbeelding 1</a></li>
<li><a href="#anonce2">Afb. 2</a></li>
<li><a href="#anonce3">Afb. 3</a></li>
<li><a href="#anonce4">Afb. 4</a></li>
<li><a href="#anonce5">Afb. 5</a></li>
</ul>
</div>
</body>
</html>
En de css code:
Quote:
#slideshow {
width: 918px; height: 546px;
overflow-x: scroll; overflow-y: hidden;
margin: 100px auto 50px auto;
box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000
}
#slideshow ul {
width: 4590px; list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {
width: 250px; margin: 0 auto 200px auto; visbility: hidden;
}
#slideshow-nav ul {
float: left;
}
#slideshow-nav ul li a {
display: block; width: 30px; height: 30px;
float: left; margin: 0 10px;
background-color: #fff; text-indent: -9999px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
background-color: #a89dBa;
}
width: 918px; height: 546px;
overflow-x: scroll; overflow-y: hidden;
margin: 100px auto 50px auto;
box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000
}
#slideshow ul {
width: 4590px; list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {
width: 250px; margin: 0 auto 200px auto; visbility: hidden;
}
#slideshow-nav ul {
float: left;
}
#slideshow-nav ul li a {
display: block; width: 30px; height: 30px;
float: left; margin: 0 10px;
background-color: #fff; text-indent: -9999px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
background-color: #a89dBa;
}
Mijn vragen: Is er iets fout? Hoe krijg ik de knoppen om te wisselen van afbeelding naast elkaar en niet onder elkaar? Hoe kan ik er voor zorgen dat hij automatisch na 5 seconden het volgend plaatje laat zien?
Het plaatje van hoe het er nu uitziet is te groot en past niet meer in deze reactie.
Als iemand reageert dan kan ik het in een nieuwe reactie plaatsen.
Gewijzigd op 02/04/2013 14:26:52 door Jan Nada