افکت عکاسی از تصاویر

افکت عکاسی از تصاویر

امروز در این آموزش قصد داریم تا به شما یک کار جذاب با جی کوئری آموزش بدهیم.در این پلاگین شما یک تصویر را بلور می کنید و با حرکت دادن موس که به شکل دریچه دوربین است از هر کجای عکس که دلتان خواست عکاسی خواهید کرد.

برای مشاهده لینک وارد شود

برای مشاهده تصاویر در پیش نمایش از تغییر+دهنده+آی+پی استفاده کنید.

قبل از شروع آموزش باید به نکاتی توجه کنیم:

۱-نحوه بلور کردن عکس:همانطور که میدانید جاوااسکریپت به طور مستقیم از خاصیت ‘بلور’ پشتیبانی نمیکند پس ما کاری که برای بلور کردن عکس انجام میدهیم این است که عکس را داخل پشته ای از div ها قرار می دهیم که هر کدام در پس زمینه عکسی را نگه میدارند البته وضوح ( opacity)آنها را در کمترین مقدار قرار دادیم.

۲-نحوه مخفی(Hide) کردن مکانما(cursor):ما برای مخفی کردن مکان نما از قابلیتی که CSS به ما داده است تا از مکان نماهای دلخواه استفاده کنیم ،استفاده کرده ایم.

بیشتر کارها توسط پلاگین جی کوئری photoshoot انجام خواهد شد.تنها کاری که ما در بخش کد HTML انجام خواهیم داد این است که یک تگ اصلی برای قرار گیری تگ های دیگر بنویسیم.

البته شما میتونید این تگ رو هر جای صفحه که دلتان خواست قرار دهید.شما طول و عرض مورد نیاز را در بخش استایل ها برای کار کردن بهتر افکت انجام خواهید داد.پس از بارگذاری صفحه و مقداردهی اولیه پلاگین،کدهای انتخابی خود را در داخل تگ div قرار می دهیم.

demo.html

اکثر تغییرات در اینجا صورت می پذیرد.همانطور که قبلا ذکر کردیم افکت بلور توسط پشته ای از تگ های div که در بالای یکدیگر قرار خواهند گرفت ایجاد میشوند،کار بعدی پوشش divها است،لایه زیرین توسط خاصیت وضوح(opacity) کمی کدر میشود.

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

641

CSS

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

styles.css

#main{
    /* This div is converted to a photoShoot stage by the Photo Shoot plug-in */
    margin:0 auto;
    width:960px;
    height:600px;
}

.shot{
    /* These contain a scaled down version of the background image: */

    border:3px solid #FCFCFC;
    float:right;
    position:relative;
    margin-left:10px;
    overflow:hidden;

    /* Adding a CSS3 shadow below the shots: */

    -moz-box-shadow:0 0 2px black;
    -webkit-box-shadow:0 0 2px black;
    box-shadow:0 0 2px black;
}

.shot img{
    display:block;
}

.album{
    /* This div holds the shots */
    bottom:50px;
    height:110px;
    overflow:hidden;
    position:absolute;
    right:20px;
    width:490px;
}

.album .slide{
    /* The slide div is contained in album  */
    width:700px;
    height:110px;
    position:relative;
    left:-210px;
}

هر عکسی که از تصویر گرفته میشود به دینامیکی در داخل تابع shoot قرارداده میشود.این عکس ها در واقع همان تکه هایی از تصویر اصلی هستند.تگ های album و slide توسط اسکریپت جی کوئری اضافه میشوند.اصل در اینجا این است که تگ slide از تگ مادر خود بزرگتر باشد.همچنین با زیاد شدن تعداد عکس ها ،عکس قبلی بصورت اسلاید به سمت چپ حرکت کند.

641

 jQuery

کارهایی که توسط جیکوئری در اینجا انجام خواهد شد عبارتند از:

۱-واردکردنalbum. در داخل تگ main#

۲-انتخاب تصادفی یک عکس از ارایه برای قرارگیری در پلاگین

۳-ایجاد اشیای(object) اختیاری

۴-تعریف یک تابع اختیاری برای اجراشدن هنگام کلیک کردن روی تصویر

۵-فراخوانی پلاگین توسط متد ()photoshoot.

script.js

$(document).ready(function(){

    // This code is executed after the DOM has been completely loaded

    // Assigning the jQuery object to a variable for speed:
    var main = $('#main');

    // Setting the width of the photoshoot area to
    // ۱۰۲۴ px or the width of the document - whichever is smallest:

    main.width(Math.min(1024,$(document).width()));

    // Creating an array with four possible backgrounds and their sizes:
    var pics = new Array(
                { url:'http://farm4.static.flickr.com/3595/3405361333_77f2a5e731_b.jpg', size:{x:1024,y:677}},
                { url:'http://farm4.static.flickr.com/3028/2753126743_4249a4e948_b.jpg', size:{x:1024,y:768}},
                { url:'http://farm4.static.flickr.com/3641/3595250019_5a1237899a_b.jpg', size:{x:1024,y:768}},
                { url:'http://farm3.static.flickr.com/2592/4018062274_1f7f23597d_o.jpg', size:{x:1158,y:756}}
    );

    // Choosing a random picture to be passed to the PhotoShoot jQuery plug-in:
    var bg = pics[parseInt(Math.random()*4)];

    // Creating an options object (try tweeking the variables):
    var opts = {
        image		:	bg.url,
        onClick		:	shoot,
        opacity		:	۰.۸,
        blurLevel	:	۴
    }

    // Calling the photoShoot plug-in and converting the #main div to a photo shoot stage:
    main.photoShoot(opts);

    // Adding the album holder to the stage:
    $('
').html('
').appendTo(main); // Our own shoot function (it is passed as onClick to the options array above): function shoot(position){ // This function is called by the plug-in when the button is pressed // Setting the overlay's div to white will create the illusion of a camera flash: main.find('.overlay').css('background-color','white'); // The flash will last for 100 milliseconds (a tenth of the second): setTimeout(function(){main.find('.overlay').css('background-color','')},100); // Creating a new shot image: var newShot = $('
').width(150).height(100); newShot.append( $('').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') ); // Removing the fourth shot (the count starts from 0): $('.shot').eq(3).remove(); // Adding the newly created shot to the album div, but moved 160px to the right. // We start an animation to slide it in view: newShot.css('margin-right',-160).prependTo('.album .slide').animate({marginRight:0},'slow'); } });

هر وقت شما در قسمتی از تصویر کلیک کنید یک عکس به داخل تگslide اضافه میشود و عکس ها از به ترتیب جدیدترین از راست نمایش داده میشوند. توجه کنید که عکس هایی را که نمایش داده نمیشوند توسط متد ()remove پاک کنید.

641

پایان

+6
-2


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


1 × هشت =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>