Soort popup
Hallo,
Nu ik verder ben met mn winkelstraat, wil ik dat mensen items kunnen kopen (RPG).
Ik had het idee dat de hele pagina dus ietsjes donkerder word en dat er in het midden een soort popup verschijnt. Dit zie je ook wel eens bij sites waarbij je op een afbeelding kunt klikken, en je dan de vergrootte versie ziet.
Ik heb wat rondgezocht naar tutorials voor dit, maar ik kan niks vinden.
(Het grootste probleem is dat ik de donkere div nooit over de hele pagina krijg)
Heeft iemand hier een tutorial voor?
Alvast bedankt
Nu ik verder ben met mn winkelstraat, wil ik dat mensen items kunnen kopen (RPG).
Ik had het idee dat de hele pagina dus ietsjes donkerder word en dat er in het midden een soort popup verschijnt. Dit zie je ook wel eens bij sites waarbij je op een afbeelding kunt klikken, en je dan de vergrootte versie ziet.
Ik heb wat rondgezocht naar tutorials voor dit, maar ik kan niks vinden.
(Het grootste probleem is dat ik de donkere div nooit over de hele pagina krijg)
Heeft iemand hier een tutorial voor?
Alvast bedankt
Gewijzigd op 21/08/2011 19:39:41 door Lord Gaga
Ik gebruik hier de kant en klare fancybox voor.
JS Lightbox al geprobeerd?
http://www.lokeshdhakar.com/projects/lightbox2/
Zie daar de demo waarbij de site zelf donkerder word naarmate de popup word weergeven.
http://www.lokeshdhakar.com/projects/lightbox2/
Zie daar de demo waarbij de site zelf donkerder word naarmate de popup word weergeven.
Jaa, die bedoel ik, maar werkt dit ook met div's ipv afbeeldingen?
Geloof ik niet, dan zou je moeten kijken naar de Fancybox.
Hmmm.. ik denk dat Fancybox wel werkt omdat bij de tweede rij voorbeelden ook tekst onder de afbeelding staat..
Iig bedankt :)
Iig bedankt :)
Ja, dat kan wel,
Probeer lightbox of ga naar jquery en zoek daar lightbox.
Ik gebruik het op eerdere sites met tekst.
Mocht lightbox niet werken, zoek dan shadowbox.
Succes!
Probeer lightbox of ga naar jquery en zoek daar lightbox.
Ik gebruik het op eerdere sites met tekst.
Mocht lightbox niet werken, zoek dan shadowbox.
Succes!
Ik gebruik deze Hierbij kan je zowel tekst als afbeeldingen gebruiken. Werkt trouwens ook erg makkelijk.
Ik heb nu dit stukje code, en het werkt helemaal, maar ik weet niet hoe ik nu een actie aan de 'Kopen'-button hang:
Zoals je ziet staat er ergens in de code: {Kopen: true, Annuleren: false}
Nu wil ik dat als je op kopen klikt, er iets in de database gezet word, ik denk dat dit moet met AJAX maar ik weet niet hoe ik dat hieraan link.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<?php
$select = "SELECT * FROM site_items ";
$query = mysqli_query($con, $select);
while($list = mysqli_fetch_object($query))
{
if ($list->source != '')
{
echo '<div class="item-shop-' . $list->shop . '" style="position: absolute; z-index: 5; left: ' . $list->x . 'px; top: ' . $list->y . 'px;"><a href="javascript: void(0);" OnClick="$.prompt(\'<h3><b>' . $list->name . '</b></h3><br>' . $list->desc . '<br><br><b>Prijs:</b> ' . convert($list->cost, 'all') . ' Galjoenen\', {buttons: {Kopen: true, Annuleren: false} })" class="tooltip" title="' . nl2br($list->desc) . '"><img alt="" src=" ' . $config['com'] . '/' . $list->source .'"></a></div>';
}
}
?>
$select = "SELECT * FROM site_items ";
$query = mysqli_query($con, $select);
while($list = mysqli_fetch_object($query))
{
if ($list->source != '')
{
echo '<div class="item-shop-' . $list->shop . '" style="position: absolute; z-index: 5; left: ' . $list->x . 'px; top: ' . $list->y . 'px;"><a href="javascript: void(0);" OnClick="$.prompt(\'<h3><b>' . $list->name . '</b></h3><br>' . $list->desc . '<br><br><b>Prijs:</b> ' . convert($list->cost, 'all') . ' Galjoenen\', {buttons: {Kopen: true, Annuleren: false} })" class="tooltip" title="' . nl2br($list->desc) . '"><img alt="" src=" ' . $config['com'] . '/' . $list->source .'"></a></div>';
}
}
?>
Zoals je ziet staat er ergens in de code: {Kopen: true, Annuleren: false}
Nu wil ik dat als je op kopen klikt, er iets in de database gezet word, ik denk dat dit moet met AJAX maar ik weet niet hoe ik dat hieraan link.
Met de Fancybox kan je iframes en via AJAX makkelijk pagina's inladen ;-)
Hmmm.. ben niet zo'n fan van Iframes.. :P
Toevoeging op 22/08/2011 12:36:46:
Ik heb het script in een functie gezet en nog iets aangepast:
Maar ik weet nog steeds niet waar ik nu de AJAX request tussen moet zetten..
Toevoeging op 22/08/2011 12:36:46:
Ik heb het script in een functie gezet en nog iets aangepast:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function BuyItem(title, desc)
{
var temp =
{
state0:
{
html: desc,
buttons: { Kopen: true },
focus: 0,
submit: function(v,m,f)
{
if(v)
{
$.prompt.goToState('state1');
}
return false;
}
},
state1:
{
html: title +'<br>Weet je zeker dat je dit item wilt kopen?',
buttons: { Terug: -1, Kopen: 1 },
focus: 0,
submit: function(v,m,f)
{
if(v==1)
{
$.prompt.goToState('state2');
}
else if(v =-1)
{
$.prompt.goToState('state0');
}
return false;
}
},
state2:
{
html: title + '<br>Je hebt dit item succesvol gekocht!',
buttons: { Oke: false }
}
}
$.prompt(temp);
}
{
var temp =
{
state0:
{
html: desc,
buttons: { Kopen: true },
focus: 0,
submit: function(v,m,f)
{
if(v)
{
$.prompt.goToState('state1');
}
return false;
}
},
state1:
{
html: title +'<br>Weet je zeker dat je dit item wilt kopen?',
buttons: { Terug: -1, Kopen: 1 },
focus: 0,
submit: function(v,m,f)
{
if(v==1)
{
$.prompt.goToState('state2');
}
else if(v =-1)
{
$.prompt.goToState('state0');
}
return false;
}
},
state2:
{
html: title + '<br>Je hebt dit item succesvol gekocht!',
buttons: { Oke: false }
}
}
$.prompt(temp);
}
Maar ik weet nog steeds niet waar ik nu de AJAX request tussen moet zetten..




