PHP Variabele uit <div>"id"</div> ?
Is het mogelijk om de waarde van een <di>"id"</div> tag te lezen?
Ik ben nu aan stoeien met document.getElementById('id') javascript in te
bouwen in de php code. Maar dit geeft nog geen werkend succes.
Probeer deze (gevonden) functie aan de praat te krijgen, maar lukt niet.
Code (php)
1
2
3
4
5
2
3
4
5
function getElementById($id)
{
$xpath = new DOMXPath($this->domDocument);
return $xpath->query("//*[@id='$id']")->item(0);
}
{
$xpath = new DOMXPath($this->domDocument);
return $xpath->query("//*[@id='$id']")->item(0);
}
Het gaat om deze inhoud: <div id="imgindex" value="3"/>
Dit zou ik willen
Code (php)
1
$imgindex = <div id="imgindex" value="3"/>
Is dit uberhaupt mogelijk in PHP?
De imgindex komt uit een Jquery plugin
Code (php)
1
$('#imgindex').val(index);
Iemand idee?
Alvast dank.
Karl Karl op 14/08/2010 16:58:03:
Zie DOM.
Beste Karl,
Daar zit ik nu mee te stoeien.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
getElementById('imgindex');
function getElementById($id)
{
$xpath = new DOMXPath($this->domDocument);
return $xpath->query("//*[@id='$id']")->item(0);
}
?>
getElementById('imgindex');
function getElementById($id)
{
$xpath = new DOMXPath($this->domDocument);
return $xpath->query("//*[@id='$id']")->item(0);
}
?>
Foutmelding: Fatal error: Using $this when not in object context in
Daarom verwijs ik je naar DOM omdat het 'overkoepelende' geheel is.
Karl Karl op 14/08/2010 17:14:59:
Je hebt die functie uit een class gepakt, die een DOMDocument aanmaakt zodat je er met DOMXpath data uit het bestand kan halen.
Daarom verwijs ik je naar DOM omdat het 'overkoepelende' geheel is.
Daarom verwijs ik je naar DOM omdat het 'overkoepelende' geheel is.
Beste Karl,
Dank voor je hulp.
Maar dit lukt mij niet, weet niet wat ze met de xml bedoelen.
Heb daar mijn php file ingevuld, fout.
Ga maar eens proberen of mijn plugin geen andere varibele kan terur sturen?
Krijg de foto naam niet uit de div tags. (misschien javascript functie maken?)
Maar blijf het proberen. Gr Henk.
Karl Karl op 14/08/2010 18:34:51:
Wat probeer je überhaupt nouw?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div> id="imgurl"</div>
$tagname = getElementById($imgurl);
// functie
function getElementById($id)
{
$doc = new DomDocument;
$doc->validateOnParse = true;
$doc->Load('valtest.php');
$doc->getElementById('id')->tagName;
return tagName;
}
$tagname = getElementById($imgurl);
// functie
function getElementById($id)
{
$doc = new DomDocument;
$doc->validateOnParse = true;
$doc->Load('valtest.php');
$doc->getElementById('id')->tagName;
return tagName;
}
Gewijzigd op 14/08/2010 19:11:38 door Henk de Back
Wat is de bedoeling?
Karl Karl op 14/08/2010 19:17:32:
Sowieso is dat niet correcte html, je probeert dus wat te doen bij de client op de server?
Wat is de bedoeling?
Wat is de bedoeling?
Het is een Jquery fotoslideshow plugin.
Deze functie daar in stuurt de div tags met het nummer en de naam van de foto terug naar mijn php code. Nu wil ik graag de naam van de foto er uit halen om te kijken hoeveel stemmen deze in de mysql database heeft.
Plugin code:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function showPhoto(index) {
$(settings.photoElement)
.attr('src',
settings.transformer(settings.thumbnails$[index].src));
settings.current = index;
$('#imgindex').val(index);
$('#imgurl').val(settings.thumbnails$[index].src);
}
$(settings.photoElement)
.attr('src',
settings.transformer(settings.thumbnails$[index].src));
settings.current = index;
$('#imgindex').val(index);
$('#imgurl').val(settings.thumbnails$[index].src);
}
In de php code:
Code (php)
1
2
2
<div id="imgindex" value="0"/>
<div id="imgurl" value="http://localhost/mobishoot/voting/thumbnails//Foto-9717746.jpg"/>
<div id="imgurl" value="http://localhost/mobishoot/voting/thumbnails//Foto-9717746.jpg"/>
Die tags wil ik graag in php $var hebben.
Bedankt voor je geduld, dit is toch ven anders dan c/C++(;>
Als je van alle foto's de rating wilt kunnen laten zien, zou je voor al die foto's alvast al die data mee moeten geven in Javascript code zodat wanneer de pagina gedownload is, Javascript deze data heeft. Via json_encode kan je vrij gemakkelijk PHP data omzetten in Javascript syntax. Een andere oplossing is ajax, of eigenlijk xmlhttprequest gebruiken om vanuit Javascript weer PHP aan te roepen (GET rating.php?foto_id=4), en dus weer een pagina te downloaden met daarin de gegevens die je op dat moment nodig hebt (PHP stuurt '6/10' terug).
Jelmer rrrr op 14/08/2010 19:35:23:
Bedenk je wel dat je hier C++ niet helemaal met PHP kan vergelijken. C++ is hier meer als het Javascript deel, en PHP als je compiler. PHP genereert je HTML pagina, en dan is het klaar. Je HTML pagina is dan gedownload door de browser, en PHP heeft er geen invloed meer op. Je kan Javascript en PHP dus niet zomaar mengen.
Als je van alle foto's de rating wilt kunnen laten zien, zou je voor al die foto's alvast al die data mee moeten geven in Javascript code zodat wanneer de pagina gedownload is, Javascript deze data heeft. Via json_encode kan je vrij gemakkelijk PHP data omzetten in Javascript syntax. Een andere oplossing is ajax, of eigenlijk xmlhttprequest gebruiken om vanuit Javascript weer PHP aan te roepen (GET rating.php?foto_id=4), en dus weer een pagina te downloaden met daarin de gegevens
Als je van alle foto's de rating wilt kunnen laten zien, zou je voor al die foto's alvast al die data mee moeten geven in Javascript code zodat wanneer de pagina gedownload is, Javascript deze data heeft. Via json_encode kan je vrij gemakkelijk PHP data omzetten in Javascript syntax. Een andere oplossing is ajax, of eigenlijk xmlhttprequest gebruiken om vanuit Javascript weer PHP aan te roepen (GET rating.php?foto_id=4), en dus weer een pagina te downloaden met daarin de gegevens
Beste Jelmer,
Het opslaan van het aantal stemmen werkt goed.
Nu wil ik als de gebruikers het fotoboek bekijken er direct het aantal stemmen onder
komt te staan.De naam van de foto en het aantal stemmen is al uit de database in een arraygeladen, dus beschikbaar. Nu moet dus alleen de naam van de foto die op het scherm komt vergeleken worden. De plugin stuurt netjes de 2 div's terug maar hoe kan ik de values vandeze nu vergelijken met de array uit de database. Heb dus deze namen nodig als $var.
dank en , gr Henk
Gewijzigd op 14/08/2010 19:55:43 door Henk de Back
Hoe krijg je nu de juiste naam bij de foto? Want de rating zal je op exact dezelfde wijze erbij moeten toveren.
Jelmer rrrr op 14/08/2010 20:07:37:
Je moet PHP en HTML/Javascript los van elkaar zien. Javascript kan niet met je database communiceren. Niet zonder door hoepels te springen.
Hoe krijg je nu de juiste naam bij de foto? Want de rating zal je op exact dezelfde wijze erbij moeten toveren.
Hoe krijg je nu de juiste naam bij de foto? Want de rating zal je op exact dezelfde wijze erbij moeten toveren.
Deze heb ik, staat op het scherm, wil nu de 2 tags values beschikbaar hebben.
value="0" en de naam in de andere tag. Hoe krijg ik deze uit de tags?
<div id="imgindex" value="0"/>
<div id="imgurl" value="http://localhost/mobishoot/voting/foto-373935.jpg/>
Welke code heb je nu? Gewoon je paar regels HTML en Javascript. Als ik zo je code nu zie gebruik je een of ander scriptje dat via getAttribute werkt? Vreemd, want id moet uniek zijn dus die divs kan je maar één van hebben. value attribuut is ook niet de beste keuze, en self-closing tags werken niet in internet explorer. Met andere woorden:
Gewijzigd op 14/08/2010 20:47:22 door Jelmer -
Jelmer rrrr op 14/08/2010 20:33:40:
Ik kan niet zien wat jij op je scherm hebt staan, ik heb toch wel wat meer context nodig dan dat alleen.
Welke code heb je nu? Gewoon je paar regels HTML en Javascript. Als ik zo je code nu zie gebruik je een of ander scriptje dat via getAttribute werkt? Vreemd, want id moet uniek zijn dus die divs kan je maar één van hebben. value attribuut is ook niet de beste keuze, en self-closing tags werken niet in internet explorer. Met andere woorden:verstop met het proberen van versimpelen van je probleem, en post wat je werkelijke probleem is.
Welke code heb je nu? Gewoon je paar regels HTML en Javascript. Als ik zo je code nu zie gebruik je een of ander scriptje dat via getAttribute werkt? Vreemd, want id moet uniek zijn dus die divs kan je maar één van hebben. value attribuut is ook niet de beste keuze, en self-closing tags werken niet in internet explorer. Met andere woorden:
De voledige code, ik heb een andere versie goed werkend, maar deze is minder
mooi dan deze met de jquery plugin slideshow. Maar goed je hebt gelijk ik ga
het helemaal opnieuw bekijken. Oplappen is niet de weg. Thanks en gr Henk.
De voledige code: plugin en php.
PHP Main program
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link href="votestyle.css" rel="stylesheet" type="text/css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="scripts/jquery-1.4.js"></script>
<script type="text/javascript"
src="scripts/jquery.jqia.photomatic.js"></script>
<script type="text/javascript">
$(function(){
$('#thumbnailsPane img').photomatic({
photoElement: '#photoDisplay',
previousControl: '#previousButton',
nextControl: '#nextButton',
firstControl: '#firstButton',
lastControl: '#lastButton',
playControl: '#playButton',
delay: 1500
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="content">
<?php
//load configuration
require("config.php");
// open file and set into array
#--> allowed img extentions
$alowed_files = array(".gif", ".jpg", ".png");
#--> opendir, read files, make array
$handle = opendir($path);
while ($file = readdir($handle))
{
$len = strlen($file);
$ext = substr($file, $len -4, $len);
if(in_array($ext, $alowed_files)) {
$image[] = $file;
//$y++;
}
}
closedir($handle);
// calculate total number of images
$aantalimg = count($image);
$start = 0;
$alt = "MobiShoot";
//*************************************************< THUMBAILS >**********************************************
// display thumbnails in unordered list format
?>
<div id="thumbnailsPane">
<?php
for ($i = $start; $i <= $aantalimg; $i++){
if(is_file($path.'/'.$image[$i]))
{
echo "<img src='$path/$image[$i]' alt='$alt' />";
}
}
?>
</div>
<?php
// End THUMBBAILS
//*******************************************************< FULL SIZED IMAGE >*************************************************
?>
<div class="mainpic">
<img id="photoDisplay" src=""/>
<div id="imgindex"></div>
<div id="imgurl"></div>
</div>
<?php
//***************************************************< VOTING >**************************************************
?>
<div class="debug">
<?php
// End Voting
?>
</div>
<?php
//****************************************************< NAVIGATION >********************************************************
?>
<div class="navigation">
<img src="images/button.placeholder.png" class="image"
alt="First" name="firstButton" id="firstButton" title="Eerste Foto"/>
<img src="images/button.placeholder.png" class="image" id="previousButton"
alt="Previous" title="Vorige Foto"/>
<img src="images/button.placeholder.png" class="image" id="playButton"
alt="Play/Pause" title="Play of Pauze SlideShow"/>
<img src="images/button.placeholder.png" class="image" id="nextButton"
alt="Next" title="Volgende Foto"/>
<img src="images/button.placeholder.png" class="image" id="lastButton"
alt="Last" title="Laatste Foto"/>
</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link href="votestyle.css" rel="stylesheet" type="text/css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="scripts/jquery-1.4.js"></script>
<script type="text/javascript"
src="scripts/jquery.jqia.photomatic.js"></script>
<script type="text/javascript">
$(function(){
$('#thumbnailsPane img').photomatic({
photoElement: '#photoDisplay',
previousControl: '#previousButton',
nextControl: '#nextButton',
firstControl: '#firstButton',
lastControl: '#lastButton',
playControl: '#playButton',
delay: 1500
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="content">
<?php
//load configuration
require("config.php");
// open file and set into array
#--> allowed img extentions
$alowed_files = array(".gif", ".jpg", ".png");
#--> opendir, read files, make array
$handle = opendir($path);
while ($file = readdir($handle))
{
$len = strlen($file);
$ext = substr($file, $len -4, $len);
if(in_array($ext, $alowed_files)) {
$image[] = $file;
//$y++;
}
}
closedir($handle);
// calculate total number of images
$aantalimg = count($image);
$start = 0;
$alt = "MobiShoot";
//*************************************************< THUMBAILS >**********************************************
// display thumbnails in unordered list format
?>
<div id="thumbnailsPane">
<?php
for ($i = $start; $i <= $aantalimg; $i++){
if(is_file($path.'/'.$image[$i]))
{
echo "<img src='$path/$image[$i]' alt='$alt' />";
}
}
?>
</div>
<?php
// End THUMBBAILS
//*******************************************************< FULL SIZED IMAGE >*************************************************
?>
<div class="mainpic">
<img id="photoDisplay" src=""/>
<div id="imgindex"></div>
<div id="imgurl"></div>
</div>
<?php
//***************************************************< VOTING >**************************************************
?>
<div class="debug">
<?php
// End Voting
?>
</div>
<?php
//****************************************************< NAVIGATION >********************************************************
?>
<div class="navigation">
<img src="images/button.placeholder.png" class="image"
alt="First" name="firstButton" id="firstButton" title="Eerste Foto"/>
<img src="images/button.placeholder.png" class="image" id="previousButton"
alt="Previous" title="Vorige Foto"/>
<img src="images/button.placeholder.png" class="image" id="playButton"
alt="Play/Pause" title="Play of Pauze SlideShow"/>
<img src="images/button.placeholder.png" class="image" id="nextButton"
alt="Next" title="Volgende Foto"/>
<img src="images/button.placeholder.png" class="image" id="lastButton"
alt="Last" title="Laatste Foto"/>
</div>
</div>
</div>
</body>
</html>
Jquery Plugin
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
(function($){
$.fn.photomatic = function(options) {
var settings = $.extend({
photoElement: 'img.photomaticPhoto',
transformer: function(name) {
return name.replace(/thumbnail/,'photo');
},
nextControl: null,
previousControl: null,
firstControl: null,
lastControl: null,
playControl: null,
returnImgNr: null,
delay: 3000
},options||{});
function showPhoto(index) {
$(settings.photoElement)
.attr('src',
settings.transformer(settings.thumbnails$[index].src));
settings.current = index;
$('#imgindex').val(index);
$('#imgurl').val(settings.thumbnails$[index].src);
}
settings.current = 0;
settings.thumbnails$ = this.filter('img');
settings.thumbnails$
.each(
function(n){ $(this).data('photomatic-index',n); }
)
.click(function(){
showPhoto($(this).data('photomatic-index'));
});
$(settings.photoElement)
.attr('title','KLIK VOOR VOLGENDE FOTO')
.css('cursor','pointer')
.click(function(){
showPhoto((settings.current+1) % settings.thumbnails$.length);
});
$(settings.nextControl).click(function(){
showPhoto((settings.current+1) % settings.thumbnails$.length);
});
$(settings.previousControl).click(function(){
showPhoto((settings.thumbnails$.length+settings.current-1) %
settings.thumbnails$.length);
});
$(settings.firstControl).click(function(){
showPhoto(0);
});
$(settings.lastControl).click(function(){
showPhoto(settings.thumbnails$.length-1);
});
$(settings.returnImgNr).click(function(){
return settings.current;
});
$(settings.playControl).toggle(
function(event){
settings.tick = window.setInterval(
function(){ $(settings.nextControl).triggerHandler('click'); },
settings.delay);
$(event.target).addClass('photomatic-playing');
$(settings.nextControl).click();
},
function(event){
window.clearInterval(settings.tick);
$(event.target).removeClass('photomatic-playing');
});
showPhoto(0);
return this;
};
})(jQuery);
$.fn.photomatic = function(options) {
var settings = $.extend({
photoElement: 'img.photomaticPhoto',
transformer: function(name) {
return name.replace(/thumbnail/,'photo');
},
nextControl: null,
previousControl: null,
firstControl: null,
lastControl: null,
playControl: null,
returnImgNr: null,
delay: 3000
},options||{});
function showPhoto(index) {
$(settings.photoElement)
.attr('src',
settings.transformer(settings.thumbnails$[index].src));
settings.current = index;
$('#imgindex').val(index);
$('#imgurl').val(settings.thumbnails$[index].src);
}
settings.current = 0;
settings.thumbnails$ = this.filter('img');
settings.thumbnails$
.each(
function(n){ $(this).data('photomatic-index',n); }
)
.click(function(){
showPhoto($(this).data('photomatic-index'));
});
$(settings.photoElement)
.attr('title','KLIK VOOR VOLGENDE FOTO')
.css('cursor','pointer')
.click(function(){
showPhoto((settings.current+1) % settings.thumbnails$.length);
});
$(settings.nextControl).click(function(){
showPhoto((settings.current+1) % settings.thumbnails$.length);
});
$(settings.previousControl).click(function(){
showPhoto((settings.thumbnails$.length+settings.current-1) %
settings.thumbnails$.length);
});
$(settings.firstControl).click(function(){
showPhoto(0);
});
$(settings.lastControl).click(function(){
showPhoto(settings.thumbnails$.length-1);
});
$(settings.returnImgNr).click(function(){
return settings.current;
});
$(settings.playControl).toggle(
function(event){
settings.tick = window.setInterval(
function(){ $(settings.nextControl).triggerHandler('click'); },
settings.delay);
$(event.target).addClass('photomatic-playing');
$(settings.nextControl).click();
},
function(event){
window.clearInterval(settings.tick);
$(event.target).removeClass('photomatic-playing');
});
showPhoto(0);
return this;
};
})(jQuery);