• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
بزرگنمایی چند تصویر به صورت جداگانه با افکت یکسان
#1
سلام

من با استفاده از panzoom.js برنامه ای دارم که زوم تصویر رو کم و زیاد میکنه.
مشکل من اینه که اگه چند تا تصویر داشته باشم و زوم رو تغییر بدم، این تغییرات روی همه تصویر ها اعمال میشه چون تصویرها باید کلاس خاصی داشته باشن و چون همشون اون کلاس رو دارن برای همه تغییرات اعمال میشه.
کد زیر رو نوشتم برای اینکه زمانی که روی تصویر کلیک میکنیم اون کلاس خاص به تصویر اختصاص داده بشه. با این کد کلاس تغییر میکنه اما دیگه زوم انجام نمیشه. میشه راهنمایی کنید؟

کد پی‌اچ‌پی:
$(document).ready(function(){
  $(
"div.panzoom1").click(function(){
   $(
this).removeClass('panzoom1').addClass('panzoo
m'
)
  });
}); 
  پاسخ
تشکر شده توسط :
#2
با این کد که نمیشه متوجه جریان شد
کدی که با اون روی تمام تصاویر اعمال میشه قرار بدید شاید بشه کاری کرد
  پاسخ
تشکر شده توسط :
#3
میخوام هر تصویر جداگانه zoom in و zoom out بشه.
کد:
<div class="wrapp-canvas">
        <div class="canvas">
            <div>          
            <div>
                <section>
                    <div class="parent">
                        <div class="panzoom1">
                          <img src="../ing1.png" width="460">
                        </div>
                        <div class="panzoom1">
                          <img src="../img2.png" width="460">
                        </div>
                        <div class="panzoom1">
                          <img src="../img3.png" width="460">
                        </div>
                    </div>
                  <div class="buttons">
                    <button class="zoom-in">Zoom In</button>
                    <button class="zoom-out">Zoom Out</button>
                    <input type="range" class="zoom-range">
                    <button class="reset">Reset</button>
                  </div>
                  <script>
                    (function() {
                      var $section = $('section').first();
                      $section.find('.panzoom').panzoom({
                        $zoomIn: $section.find(".zoom-in"),
                        $zoomOut: $section.find(".zoom-out"),
                        $zoomRange: $section.find(".zoom-range"),
                        $reset: $section.find(".reset")
                      });
                    })();
                  </script>
            </section>
        </div>
        </div>    
    </div>
    </div>
خیلی ممنون
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان