افکت به تصاویر با استفاده از اسکریپت picanim

دسته‌ها : جاوا اسکریپت و جی کوئری, جی کوئری علی میرزائی 46 دیدگاه‌ها

افکت به تصاویر با استفاده از اسکریپت picanim

سلام به همگی،
امروز قصد دارم شما رو با اسکریپت جی کوئری کارآمد و متفاوتی آشنا کنم که توسط اون میتونید در تصاویر وبسایتتون افکت های جذاب و گوناگونی رو ایجاد کنید.
این اسکریپت، picanim نام داره که شامل دو فایل اصلی Javascript و css.
پیش از هر چیز باید این دو فایل رو دانلود و سپس در قالب فراخوانیشون کنید.

نمونه فراخوانی (در html5):

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.picanim.min.js"></script>
<link href="<?php echo get_template_directory_uri(); ?>/css/picanim.css" rel="stylesheet">

پس از فراخوانی اسکریپت، نوبت به استفاده از فایل ها در قالب میرسه. برای این کار باید از دستور .picanim() استفاده کنیم.

نحوه استفاده از این دستور رو با یک نمونه مثال میزنم: (کدهای زیر  رو داخل تگ script در بخش body یا head پوسته  به کار ببرید.)
* نکته: در این آموزش ما قصد داریم که نحوه استفاده ی پویا از اسکریپت رو بهتون آموزش بدیم. در صورت تمایل میتونید از اسکریپت به صورت استاتیک هم استفاده کنید.

$(document).ready(function(){
$('.full-post-content img').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
});

توضیحات:

در نمونه بالا، ابتدا کلاس full-post-content رو که سلکتور اصلی تک نوشته های من رو تشکیل میده تعریف کردم و سپس تگ img رو با یک فاصله در مقابلش قرار دادم تا اشاره کنم که دستور picanim تنها برای تصاویر قابل استفاده است.

* نکته: فراموش نکنید که نام سلکتور کلاس رو حتما با قالب خودتون ست کنید.

در مرحله بعد نوبت به استفاده از دستور .picanim میرسه. اما همونطور که مشاهده میکنید از این دستور به شکل خالی استفاده نکردم و داخل پراتنز دستورات دیگری رو هم قرار دادم. این دستورات در واقع افکت های اسکریپت رو تشکیل میدن.
دستور initEF افکت اولیه تصویر رو تعریف میکنه که دارای سه گزینه به شرح زیر:

  • transparent – شفاف
  • grayscale – سیاه سفید
  • blur – مات

دستور hoverEF برای زمانیه که موس بر روی تصویر قرار میگیره و یک حالت انیمیشنی  رو در اون ایجاد میکنه . نمونه های قابل استفاده در این بخش عبارتند از:

  • fadein
  • sliceDownLeft
  • sliceDownRight
  • sliceUpLeft
  • sliceUpRight
  • foldLeft
  • foldRight
  • boxRandom
  • boxDiagional

در آخر چند مثال از افکت های مختلف رو براتون قرار میدم تا از هرکدوم که خواستید استفاده کنید:

$('#test1 img').picanim({initEf:'grayscale',hoverEf:'fadeIn'});
$('#test2 img').picanim({initEf:'blur',hoverEf:'fadeIn'});
$('#test3 img').picanim({initEf:'transparent',hoverEf:'fadeIn'});
$('#test4 img').picanim({initEf:'grayscale',hoverEf:'sliceUpLeft'});
$('#test5 img').picanim({initEf:'blur',hoverEf:'sliceUpRight'});
$('#test6 img').picanim({initEf:'transparent',hoverEf:'sliceDownLeft'});
$('#test7 img').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
$('#test8 img').picanim({initEf:'blur',hoverEf:'foldRight'});
$('#test9 img').picanim({initEf:'transparent',hoverEf:'boxRandom',bgColor:'#ffffff'});
$('#test10 img').picanim({initEf:'blur',hoverEf:'boxDiagional'});
$('#test11 img').picanim({initEf:'transparent',hoverEf:'sliceUpLeft',slices:12,bgColor:'#555',animSpeed:500,tooltip:true});

امیدوارم که آموزش مفید بوده باشه…

منبع : دنیای وردپرس و برنامه نویسی – www.alimir.ir

راستی یادتون نره که حتما باید کتابخانه جی کوئری در قالبتون فراخوانی شده باشه...

دیدگاه کاربران در مورد این نوشته

  1. میشه تو ایندکس ها برای بک گراند هم از این پلاگین استفاده کرد ؟
    اگر نه، میشه یک پلاگین معرفی کنید که بشه برای بک گراند هم استفاده کرد ؟

    تشکر.

    توسط Aslan پاسخ

  2. سلام مشکلم حل شد
    بسیار پلاگین هاین های زیبایی بود
    تشکر

    توسط امیر پاسخ

    1. آقا امیر شرمنده، من یه چند وقتیه که سرم شلوغ و به همین خاطر، یکم دیر کامنت ها رو جواب میدم! اما نتیجش برای شما خوب بود و خودتون تونستید که مشکل رو رفع کنید :)

      توسط علی میرزائی پاسخ

  3. سلام من از افکت ها استفاده کردم تا تست شماره 3 درست هست ولی
    از 4 تا 11 خرابن مثل میلاد ؟

    توسط امیر پاسخ

  4. سلام لطف کنید یه ادرس تصویر به همراه کلاس کاملش به عنوان مثال هم بزارید

    توسط حسین پاسخ

    1. سلام، تمامی توضیحات پیاده سازی، در متن ذکر شده و نیازی به کلاس نیست.

      توسط علی میرزائی پاسخ

      1. من کد ها رو استفاده کردم تا کلاس شماره سه درست کار می کنه بعدی هاش مثل دوست عزیزمون میلاد هست
        این منمونه کد فراخوانی من در پست

        توسط حسین پاسخ

  5. با سلام و خسته نباشید
    ببخشید من یه مشکلی در استفاده از این افکت ها دارم
    تو سایت من وقتی افکت رو روی عکس ها شاخص سایتم میذارم درست کار نمیکنه یعنی قسمت اولش که تصویر رو تار میکنه درست کار میکنه و لی قسمت هاورش وقتی موس میره روش به جای این که افکت رو انجام بده خود عکس رو به صورت کوچیک شده از پایین به بالا روی خود عکس میاره به این عکس ها نگاه کنید
    عکس اول
    http://8pic.ir/images/hih9f16qvsk9g6pioxn8.jpg
    این مال وقتی هست که موس روی عکس نرفته
    عکس دوم
    http://8pic.ir/images/us2367fza9y6guaqdmw5.jpg
    مال وقتی هست که موس روی عکس میره به جای این که افکت رو انجام بده یع عکس کوچیک شده از خود عکس رو روی عکس میاره
    آدرس سایتم اینه
    Barf98.ir
    و من هم از این افکت استفاده کردم
    .picanim({initEf:'blur',hoverEf:'sliceUpRight'});
    ممنون میشم راه حلش رو پیدا کنید چون چند روزه درگیرشم

    توسط میلاد پاسخ

    1. سلام، در سورس قالب سایتتون، من کد picanim رو مشاهده نکردم! اسکریپت رو در محیط لوکال تست کردید؟!؟

      توسط علی میرزائی پاسخ

    2. سلام شما باید در استایل قالبتون این کد رو حذف کنید بعد اوکی میشه
      .entry img { max-width:100%; height:auto;}

      توسط امیر پاسخ

  6. به هیچ عنوان کار نمی ده !!!
    خواهشا اگر میتونید روی وردپرس نصب کنید یا اینو افزونه وردپرس نمایید هزینه اش رو پرداخت می کنم

    توسط امیر پاسخ

    1. از طریق فرم تماس، ایمیل بزنید تا در این رابطه صحبت کنیم…

      توسط علی میرزائی پاسخ

  7. سلام این کدش رو به صورت استاتیک برام بزارید خودم اوکیش می کنم مرسی

    توسط امیر پاسخ

    1. کد که همون کد، فقط باید داخل تگ اسکریپت ازش استفاده کنی:

      <script>$(document).ready(function(){
      $('.full-post-content img').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
      });</script>

      توسط علی میرزائی پاسخ

  8. آقا سلام میشه دقیق بگید برای استفاده در وردپرس چی کار کنم

    توسط amira پاسخ

  9. سلام همشون اوکی شدن ولی من این کد رو میزارم توی قسمت های مربوطه
    $(document).ready(function(){
    $('.full-post-content img').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
    });

    دوباره همین کد رو به صورت ارور توی صفحه اصلی سایت نشون می ده؟
    من از وردپرس استفاده می کنم
    باید بزارم توی استایل مگه ؟

    توسط امیر پاسخ

    1. نه امیر جان! استایل که قضیه اش فرق میکنه. در متن هم توضیح دادم که باید این کد رو داخل تگ

      توسط علی میرزائی پاسخ

  10. سلام . من هرکاری کردم اجرا نشد که نشد . لطفا کمکم کنید

    توسط مهرداد پاسخ

  11. ممنون از وقتی که گذاشتی
    آره،دقیقا خودش رو گذاشتم،copy paste :)
    البته خیلی جالبه که همون رو اگه بذارم تو فایل htm به درستی کار میکنه، ظاهرا با وردپرس مشکل داره! شما خودتون تو وردپرس اجراش کردید؟؟؟

    توسط amir پاسخ

    1. اشتباه شما همینجاست! همونطور که تو متن اصلی اشاره کردم، شما باید از سلکتور صفحه خودتون استفاده کنید. (مثلا اگه بخش مورد نظر شما دارای نام کلاس content باشه، شما باید از سکتور .content img استفاده کنید.)
      هیچ فرقی نمیکنه، خروجی سمت کاربر وردپرس هم html و از این بابت مشکلی نیست.

      توسط علی میرزائی پاسخ

      1. مرسی از پاسختون، منظورم از کپی جاهایی بود که لازم بود،نه دیگه همه جا
        مشکل من از پلاگین wp-jalali بود که تو وبسایتم بود، اسکریپت این پلاگین و افکت شما با هم سازگار نبودند.
        الان با $.noConflict در جی کوئری مشکلم حل شد و همه چی به خوبی کار میکنه!!!!!
        صرفا جهت اطلاع دوستانی که ممکنه به مشکل بخورند گفتند

        با تشکر از وقتی که گذاشتید

        توسط amir پاسخ

  12. البته ذکر این نکته که در وردپرس کار نمیکنه وگرنه در جاهای دیگه کار میکنه

    توسط amir پاسخ

  13. سلام
    اول واقعا ممنون از لطفت
    زحمتت ستودنیه

    دوم من نتونستم این رو اجرا کنم،همه ی کارایی رو که گفته بودی انجام دادم.کتابخانه jquery-1.7.2.min رو هم اضاف کردم ولی نشد!
    حتی رفتم تو سایت دمو و view page source رو زدم و طبق اون امتحان کردم ولی جواب نگرفتم!
    میشه لطفـــــا اگه نکته ای هست که فکر میکنی من جا انداختم رو بهم بگی؟؟؟؟؟؟

    با تشکر

    توسط amir پاسخ

    1. سلام، خواهش میکنم امیر جان.
      نام سلکتور کلاس یا id رو درست وارد کردید؟!؟

      توسط علی میرزائی پاسخ

  14. اگه میشه فایل دانلودش رو بذارید.

    توسط z88 پاسخ

  15. زیبا بود هرچند استفاده نکردم

    توسط احسان پاسخ

  16. خوب بود

    توسط دوستداران طراحی وب پاسخ

  17. عالیییییییییییییی بود .ممنون

    توسط طراحی سایت پاسخ

  18. سلام :)
    مرسی جون میده واسه سایت های تفریحی

    توسط هوشنگ پاسخ

    1. خواهش میکنم، امیدوارم که به کارتون اومده باشه {گل}

      توسط علی میرزائی پاسخ

  19. علی جان زورم هم بهت نمیرسه بگیرم یه دوتا چکی چیزی بهت بزنم! 😛
    بیا و خوبی کن!! آقا اثلا من بخوام تو سایت شما نویسنده بشم شرایطش چیه؟ با توجه به این که خودم درحال حاظر مدیریت گروه خدماتی محم رو بر عهده دارم

    توسط محمد پاسخ

    1. آخه یه مقدار دو پهلو دیدگاه میزنی آدم حرصش در میاد! ( شوخی میکنم ;))
      اول باید نیت کنی :) بعد رزومه و توضیحاتی رو که لازم میدونی بهم ایمیل کن تا باهم بیشتر صحبت کنیم…
      راستی در فکر راه اندازی بخش پست مهمان هستم. اگه پیشنهادی در این رابطه هم داشتی در ایمیل ضمیمش کن.

      توسط علی میرزائی پاسخ

  20. علی جون میگما این مطالب رو خودت از سایت مرجع ترجمه می کنی؟اگر نیازی بود بگو ما هم کمک کنیم به این دنیای بی انتهای وردپرس.
    من مترجم هستم اگر لازم شد کمکت می کنم داإآآآآآآآآآآآآآآآآّش

    توسط محمد پاسخ

    1. محمد عزیز!اون طور که شما فکر میکنید نیست.
      غیر از یکی دو مورد ترجمه+ویرایش، بقیه مطالب توسط خودم نوشته شده.
      بحث وب و برنامه نویسی به شکلی نیست که بشه بدون داشتن اطلاعات اولیه کار ترجمه انجام داد. اگه این توانایی رو در خودتون میبینید بسم الله…

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید