Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery]imageareaselect
neo1986kk
post 21.02.2010, 23:46:54
Post #1





Grupa: Zarejestrowani
Postów: 561
Pomógł: 3
Dołączył: 2.02.2009

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
lord_t
post 22.02.2010, 11:16:10
Post #2





Grupa: Zarejestrowani
Postów: 603
Pomógł: 131
Dołączył: 24.07.2007
Skąd: Górny Śląsk

Ostrzeżenie: (0%)
-----

Upewnij się, że wszystkie skrypty masz wczytane. I najlepiej zapodaj to online.


--------------------
Błędy w JS? ------> Firebug (dla FF)
<>< Warto posłuchać.

Pisanie skryptów javaScript i jQuery.
Go to the top of the page
+Quote Post
neo1986kk
post 22.02.2010, 18:38:29
Post #3





Grupa: Zarejestrowani
Postów: 561
Pomógł: 3
Dołączył: 2.02.2009

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 15.07.2025 - 23:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn