Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]imageareaselect
Forum PHP.pl > Forum > Przedszkole
neo1986kk
21.02.2010, 23:46:54
Witam, tak przeglądam wątki o imageareaselect i co pierwsze sie rzuca w oczy to, że są tylko 3...
Ale tam ludzie mają poważne problemy z tą wtyczką a nie takie jak ja... pokaże co tam namazłem
[PHP] pobierz, plaintext 
  1. <head>
  2. <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  3.  
  4. <script type="text/javascript" src="scripts/jquery.min.js"></script>
  5. <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  6. <script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
  7.  
  8. <script type="text/javascript">
  9. $(document).ready(function () {
  10. $('#image').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true });
  11. });
  12. </script>
  13. <img src="image.jpg" id="image" alt="Obrazek" />
[PHP] pobierz, plaintext


Firebug na dzień dobry mi pokazuje że jQery is nod defined, a po kliknięciu play wyświetla $ is not defined... Wszyskie pliki mam wgrane i wpisałem wszystko zgodnie ze wzorem (chyba...) no i oczywiście po 2 kliknięciu na play, strona sie wczytuje, ale ze zdjęciem nie da się zrobić nic...

Jesli ktos z was bawił się tym narzędziem i może mi pomóc to proszę o podopowiedzi. Dziękuje z góry.
lord_t
22.02.2010, 11:16:10
Upewnij się, że wszystkie skrypty masz wczytane. I najlepiej zapodaj to online.
neo1986kk
22.02.2010, 18:38:29
Ale ja jestem idiotą, bezmyslnie wkleiłem nagłowki, a przecież ja mam wszystkie skrypty na glownym public_http.

no dobra wszystko fajnie działa jak ta lala, ale oczywiście do czasu... no i czas nadszedłtongue.gif

co sie okazało... wgralem swoją fotkę, która jest większa od fotki demo. moja(2592x1944) demo(500x370)

Wszystko się rozjechało, zwraca ten sam "crop"

Zmieniłem jquery troszke na łatwiejszy dla mnie plugin. Pokaże wam jak to wygląda i proszę o pomoc jeśli ktoś miałby jakiś pomysł co zrobić zebym mógł ładować każdy rodzaj zdjęcia a nie tylko 500x370 chyba ze da się jakoś w locie przy uploadzie zmienić rozmiar fotki.

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. /**
  4.  * Jcrop image cropping plugin for jQuery
  5.  * Example cropping script
  6.  * @copyright 2008 Kelly Hallman
  7.  * More info: <a href="http://deepliquid.com/content/Jcrop_Implementation_Theory.html" target="_blank">http://deepliquid.com/content/Jcrop_Implem...ion_Theory.html</a>
  8.  */
  9.  
  10. if ($_SERVER['REQUEST_METHOD'] == 'POST')
  11. {
  12.     $targ_w = $targ_h = 150;
  13.     $jpeg_quality = 90;
  14.  
  15.     $src = 'demo_files/flowers.jpg';
  16.     $img_r = imagecreatefromjpeg($src);
  17.     $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
  18.  
  19.     imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
  20.     $targ_w,$targ_h,$_POST['w'],$_POST['h']);
  21.  
  22.     header('Content-type: image/jpeg');
  23.     imagejpeg($dst_r,null,$jpeg_quality);
  24.  
  25.     exit;
  26. }
  27.  
  28. // If not a POST request, display page below:
  29.  
  30. ?>
  31. <html>
  32.     <head>
  33.  
  34.         <script src="../js/jquery.min.js"></script>
  35.         <script src="../js/jquery.Jcrop.js"></script>
  36.         <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
  37.         <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
  38.  
  39.         <script language="Javascript">
  40.         $(function(){
  41.  
  42.                 $('#cropbox').Jcrop({
  43.                     aspectRatio: 1,
  44.                     onSelect: updateCoords,
  45.                     onChange: showPreview,
  46.                 });
  47.  
  48.             });
  49.  
  50.             function updateCoords(c)
  51.             {
  52.                 $('#x').val(c.x);
  53.                 $('#y').val(c.y);
  54.                 $('#w').val(c.w);
  55.                 $('#h').val(c.h);
  56.             };
  57.  
  58.             function checkCoords()
  59.             {
  60.                 if (parseInt($('#w').val())) return true;
  61.                 alert('Please select a crop region then press submit.');
  62.                 return false;
  63.             };
  64.  
  65.             function zmien(){
  66.  
  67.                 jQuery('#cropbox').Jcrop({
  68.                     onChange: showPreview,
  69.                     onSelect: showPreview,
  70.                     aspectRatio: 1
  71.                 });
  72.  
  73.             };
  74.  
  75.             function showPreview(coords)
  76.             {
  77.                 if (parseInt(coords.w) > 0)
  78.                 {
  79.                     var rx = 100 / coords.w;
  80.                     var ry = 100 / coords.h;
  81.  
  82.                     jQuery('#preview').css({
  83.                         width: Math.round(rx * 500) + 'px',
  84.                         height: Math.round(ry * 370) + 'px',
  85.                         marginLeft: '-' + Math.round(rx * coords.x) + 'px',
  86.                         marginTop: '-' + Math.round(ry * coords.y) + 'px'
  87.                     });
  88.                 }
  89.             }
  90.  
  91.         </script>
  92.  
  93.     </head>
  94.  
  95.     <body>
  96.  
  97.     <div id="outer">
  98.     <div class="jcExample">
  99.     <div class="article">
  100.  
  101.         <h1>Zaznacz obrazek</h1>
  102.  
  103.         <!-- This is the image we're attaching Jcrop to -->
  104.         <table>
  105.         <tr>
  106.         <td>
  107.         <img src="demo_files/flowers.jpg" id="cropbox"/>
  108.         </td>
  109.         <td>
  110.         <div style="width:100px;height:100px;overflow:hidden;">
  111.             <img src="demo_files/flowers.jpg" id="preview" />
  112.         </div>
  113.  
  114.         </td>
  115.         </tr>
  116.         <tr>
  117.         <td>
  118.         <form action="crop.php" method="post" onsubmit="return checkCoords();">
  119.             <input type="hidden" id="x" name="x" />
  120.             <input type="hidden" id="y" name="y" />
  121.             <input type="hidden" id="w" name="w" />
  122.             <input type="hidden" id="h" name="h" />
  123.             <input type="submit" value="Crop Image" />
  124.         </form>
  125.         </td>
  126.         </table>
  127.  
  128.         </div>
  129.  
  130.  
  131.     </div>
  132.     </div>
  133.     </div>
  134.     </body>
  135.  
  136. </html>
[PHP] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.