Vergroten opties bij invoegen afbeelding
Werkt perfect allemaal en redelijk uit te breiden.
Nu zit ik alleen nog maar met de foto's...
Mensen kunnen een URL opgeven, maar ik laat ze liever een foto kiezen (uit een lijst die ik samenstel... kan op een aparte pagina).
Dit is de aanroep:
Code (php)
1
2
3
4
5
2
3
4
5
$('.image', tb).click(function(){
var p=prompt("Wat is het adres van de afbeelding?");
if(p)
formatText(iframe, 'InsertImage', p);
return false; });
var p=prompt("Wat is het adres van de afbeelding?");
if(p)
formatText(iframe, 'InsertImage', p);
return false; });
Nu wil ik eigenlijk van die prompt af, en dat hij een popup (of een div/layer) toont waarin de mensen mogelijke afbeeldingen (uit hun eigen album) kunnen kiezen, aanklikken en klaar.
Dus zoiets, maar dit werkt (natuurlijk niet);
Code (php)
1
2
3
4
5
2
3
4
5
$('.image', tb).click(function(){
$.get('texteditor/fotokiezer.php', function(data) {$('.result').html(data);});
if(p)
formatText(iframe, 'InsertImage', p);
return false; });
$.get('texteditor/fotokiezer.php', function(data) {$('.result').html(data);});
if(p)
formatText(iframe, 'InsertImage', p);
return false; });
Maar hoe laat ik ze dan een foto aanklikken, de <div> sluiten en de afbeelding toevoegen?
Ik gebruik jQuery (zoals je wellicht al zag).
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
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
<?php
if (!empty($_GET['popup'])) {
// ajax verzoek
// ik veronderstel dat de images uit een db komen ... voeg een attribute data-id toe met daarin een id van de image
// zelf regelen ...
echo '
<img data-id="5" src="http://hebrewyou.com/blog/wp-content/uploads/albert-einstein.jpg"/>
<img data-id="8" src="http://www.fargoexe.com/blog/images/1332000266.jpg"/>
<img data-id="11" src="http://yareah.com/wp-content/uploads/2012/04/einstein.jpg"/>
';
exit;
}
if (!empty($_GET['selectimage'])) {
// ajax verzoek
// Hier heb je dus de id van de geselecteerde foto. Zie zelf dat je hier iets nuttigs mee doet.
echo 'id van de geselecteerde foto: ' . (int) $_GET['selectimage'];
exit;
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
#popup {
border: 1px solid #666666;
display: none;
width: 460px;
}
#popup img {
max-width: 150px;
max-height: 150px;
margin: 5px;
}
#popup .close, #popup img {
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" id="openpopup" value="Foto kiezen"/>
<div id="popup"></div>
<div id="message"></div>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.close').live("click", function() {
$("#popup").hide();
});
$('#openpopup').click(function() {
$.ajax({
url: "index.php?popup=1",
cache: false,
success: function(html){
$("#popup").show().html(
'<div class="close">sluiten</div>' + html
);
}
});
});
$('#popup img').live('click', function(e){
var id = Number($(this).data('id')); // ik veronderstel een numerieke id ...
$.ajax({
url: "index.php?selectimage=" + id,
cache: false,
success: function(html){
$("#message").html(
html
);
$("#popup").hide();
}
});
});
});
</script>
</body>
</html>
if (!empty($_GET['popup'])) {
// ajax verzoek
// ik veronderstel dat de images uit een db komen ... voeg een attribute data-id toe met daarin een id van de image
// zelf regelen ...
echo '
<img data-id="5" src="http://hebrewyou.com/blog/wp-content/uploads/albert-einstein.jpg"/>
<img data-id="8" src="http://www.fargoexe.com/blog/images/1332000266.jpg"/>
<img data-id="11" src="http://yareah.com/wp-content/uploads/2012/04/einstein.jpg"/>
';
exit;
}
if (!empty($_GET['selectimage'])) {
// ajax verzoek
// Hier heb je dus de id van de geselecteerde foto. Zie zelf dat je hier iets nuttigs mee doet.
echo 'id van de geselecteerde foto: ' . (int) $_GET['selectimage'];
exit;
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
#popup {
border: 1px solid #666666;
display: none;
width: 460px;
}
#popup img {
max-width: 150px;
max-height: 150px;
margin: 5px;
}
#popup .close, #popup img {
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" id="openpopup" value="Foto kiezen"/>
<div id="popup"></div>
<div id="message"></div>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.close').live("click", function() {
$("#popup").hide();
});
$('#openpopup').click(function() {
$.ajax({
url: "index.php?popup=1",
cache: false,
success: function(html){
$("#popup").show().html(
'<div class="close">sluiten</div>' + html
);
}
});
});
$('#popup img').live('click', function(e){
var id = Number($(this).data('id')); // ik veronderstel een numerieke id ...
$.ajax({
url: "index.php?selectimage=" + id,
cache: false,
success: function(html){
$("#message").html(
html
);
$("#popup").hide();
}
});
});
});
</script>
</body>
</html>
(Het is me niet volledig duidelijk wat je precies wil)
Gewijzigd op 28/06/2012 15:04:16 door Kris Peeters
Met jouw code heb ik het iets anders geregeld, maar 't werkt nu fantastisch!