ساخت اپیلیکیشن نمایش عکس بصورت تمام صفحه

ساخت اپیلیکیشن نمایش عکس بصورت تمام صفحه

ما در این آموزش به شما نحوه ساخت اپیلیکیشن نمایش عکس بصورت تمام صفحه را می دهیم .یکی از قابلیت های جدیدی که در HTML5  وجود دارد این است که API های جدیدی به آن اضافه شده است یکی از آنها Full Screen API است

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

.این API به ما این امکان را می دهد تا ما صفحه وب سایت یا یک المان را با استفاده از ویژگی های اصلی مرورگر در حالت تمام صفحه نشان بدیم که ما در این آموزش آز آن استفاده خواهیم کرد.(این API در مرورگر های جدید پشتیبانی میشود)

HTML

ما کار را با کد HTML آغاز میکنیم. ما از تگ div برای عکس و تگ span برای دکمه استفاده می کنیم.

<div id="fullscreen" class="html5-fullscreen-api">  
    <img src="img/arokanddedes.jpg">  
    <span class="fs-button"></span>  
</div>

CSS

پس از قرار دادن عکس در وسط صفحه ما از چندین کد CSS برای گرافیک بهتر استفاده می کنیم.

.demo-wrapper {  
    width: 38%;  
    margin: 0 auto;  
}  
.html5-fullscreen-api {  
    position: relative;  
}  
.html5-fullscreen-api img {  
    max-width: 100%;  
    border: 10px solid #fff;  
    box-shadow: 0px 0px 50px #ccc;  
}  
.html5-fullscreen-api .fs-button {  
    z-index: 100;  
    display: inline-block;  
    width: 32px;  
    height: 32px;  
    position: absolute;  
    top: 10px;  
    rightright: 10px;  
    cursor: pointer;  
}

first-preview(2)

من تصمیم دارم ایکون را داخل تگ span استفاده کنم تا بعدا در صورت تمایل به راحتی بتوانم آیکون مورد نظر را عوض کنم

.html5-fullscreen-api .fs-button:after {  
    display: inline-block;  
    width: 100%;  
    height: 100%;  
    font-size: 32px;  
    font-family: 'ModernPictogramsNormal';  
    color: rgba(255,255,255,.5);  
    cursor: pointer;  
    content: "v";  
}  
.html5-fullscreen-api .fs-button:hover:after {  
    color: rgb(255,255,255);  
}

first-preview(3)

ما از jQuery  استفاده میکنیم تا کد را کمی کاهش دهیم.

همانطور که اشاره شد،ما عکس را با یک کلیک تمام صفحه خواهیم کرد.از متد on در jQuery استفاده می کنیم.

$('.fs-button').on('click', function(){   

}

ما اول باید بررسی کنیم ببینیم که آیا عنصر مورد نظر در حالت تمام صفحه است؟اگر باشد webkitCancelFullScreen آن را به حالت نرمال بر میگرداند.در غیر این صوت ما با استفاده از متد webkitRequestFullScreen آن را به تمام صفحه تبدیل می کنیم.

$('.fs-button').on('click', function(){  
        var elem = document.getElementById('fullscreen');  
        if(document.webkitFullscreenElement) {  
            document.webkitCancelFullScreen();  
        }  
        else {  
            elem.webkitRequestFullScreen();  
        };  
    });

fullscreen-mode

Webkit(برای فایرفاکس) همچنین به ما این امکان را میدهد تا style هایی را هنگامی که عکس در حالت تمام صفحه است به آن اضافه کنیم.برای مثال اگر بخواهیم پس زمینه را عوض کنیم از این روش استفاده می کنیم.

#fullscreen:-webkit-full-screen {  
    background-image: url('../img/ios-linen.jpg');   
    width: 100%;  
}

 

+1
0


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

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

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

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

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

*


سه + 6 =

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>