inclusion de jQuery UI Draggable
Bonjour a tous,
Voilà je vien d'utiliser le plugin jQuery UI Draggable pour faire un module de racadrage de photo comme sur facebook le recadrage de la photo de couvertue quand on glisse la photo.
Bref j'ai testé dans un ficher independant et ca marche nikel apres plusieurs heures de concentration bref.
Mon souci est quand je veux l'inclure dans un autre fichier qui est assez chargé de code javascript html et php cela ne fonctionne plus !!!!:cry:
j'ai reverifier mon code et même l'inclusion des script je c pas ce qui cloche!!!! :calim2:
voici le code dans le fichier independant
Code:
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| <?php
/*********************************************************************************
* Script php pour tester le racadrage de la photo de couvertue
**********************************************************************************/
$BR="<br/>";
set_include_path(get_include_path() . PATH_SEPARATOR . realpath(dirname(__FILE__).'/..'));
//On définit la taille maximale des commentaires que l'on affiche
define('COMMAXSIZE', 50);
include_once "scripts/utils/MysqlUtils.php";
include_once "scripts/utils/UrlWritingUtils.php";
include_once 'libs/local.php';
include_once 'libs/config.php';
include_once 'libs/meta.php';
include_once 'scripts/utils/Common.php';
include_once 'scripts/utils/SessionUtils.php';
include_once 'scripts/bo/MemberDAO.php';
include_once 'scripts/bo/MarqueDAO.php';
include_once 'scripts/bo/ModeleDAO.php';
include_once 'scripts/vo/Member.php';
include_once 'scripts/vo/Marque.php';
include_once 'scripts/vo/Modele.php';
include_once("scripts/bo/CityDAO.php");
include_once("scripts/bo/DepartmentDAO.php");
include_once("scripts/bo/RegionDAO.php");
include_once("scripts/vo/City.php");
include_once("scripts/vo/Department.php");
include_once("scripts/vo/Region.php");
include_once("scripts/vo/SearchEngine.php");
include_once "scripts/bo/VitrineDAO.php";
include_once "scripts/vo/Vitrine.php";
include_once "scripts/bo/VitrineProprieteDAO.php";
include_once "scripts/vo/VitrinePropriete.php";
$myconnection = MysqlUtils::openConnection();
$memberDao = new MemberDAO($myconnection);
$vitrineDAO = new VitrineDAO($myconnection);
$vitrinePropDAO = new VitrineProprieteDAO($myconnection);
$id_membre = "370371";
$member = $memberDao->get($id_membre);
$vitrine = $vitrineDAO->getVitrine($member);
$vitrineProp = $vitrinePropDAO->getVitrinePropriete($vitrine);
?>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#hovered,#slider {
cursor: pointer;
top: 100px;
}
#conteneur,#conteneur1 {
width: 680px;
height: 222px;
padding: 0px;
overflow: hidden;
background-color: #FFFFFF;
}
</style>
<script>
$(function() {
$( "#hovered" ).draggable({
containment : '#limitation',
axis: "y",
stop: function () {
document.getElementById("image_top_pop").value = 343 - getPositionTop(this) ;
//alert (343 - getPositionTop(this));
}
});
});
function getPositionTop(e)
{
var top = 0;
/*Tant que l'on a un élément parent*/
while (e.offsetParent != undefined && e.offsetParent != null)
{
/*On ajoute la position de l'élément parent*/
top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
e = e.offsetParent;
}
return -(top - 8);
}
</script>
<style type="text/css">
textarea {
line-height: 16px;
}
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
div.entry {
width: 385px;
float: left;
}
</style>
</head>
<body style="background-color: #CCC;">
<div id="conteneur" style="top: 343px;">
<div id="limitation"
style="float: center; width: 680px; height: 908px; background-color: #FFFFFF; top: -343px; position: relative;">
<p style="margin: 0px;">
<img id="hovered" class="ui-widget-content"
src="../templateimages/phottest.jpg" width="680px"
style="border: 0px; top: <?php echo $vitrineProp->image_top; ?>px;" />
</p>
</div>
</div>
<form id="recadrerPhotoForm" style="float: left;" method="post" action="../test/do-position-photo.php" >
<input type="hidden" id="id_vitrineprop" name="id_vitrineprop" value="<?php echo $vitrineProp->id; ?>" />
<input type="hidden" id="id_membre" name="id_membre" value="<?php echo $member->id; ?>" />
<input type="hidden" id="image_top_pop" name="image_top_pop" value="<?php echo $vitrineProp->image_top; ?>" />
<input type="submit" class="envoyer" name="enregistrer" value="Enregistrer" style="width: 120px;" />
</form>
</body>
</html>
<?php MysqlUtils::closeConnection($myconnection); ?> |
comme je vous ai dit ca marche nikel!
je vous explique mon but:
j'ai une page php que j'appel vitrine c'est comme un profile et au haut j'ai mis une image comme la photo de couverture dans facebook et et on survolant l'image l'user peut changer limage, la supprimer ou la recadrer.
pour le recadrage voila le mecanisme:
quand le user click sur le bouton reacdrer la page se recharge en mode recadrage= c'est a dire un voile derrier et la photo s'affiche comme ci un pop up voila le probleme est que l'image ne glisse pas :(
qu'elqu'un peut m'aider s'il vous plaît ??? :oops:
