close
تبلیغات در اینترنت
آموزش برنامه نویسی وب , Web Coding , website , آموزش طراحی وبسایت , آم
X

درباره ی ما

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

آموزش ساخت متن نئون در فتوشاپ
آموزش ساخت متن نئون در فتوشاپ
شروع یادگیری
گروه نرم افزاری سافت گروپ
گروه نرم افزاری سافت گروپ
گرافیک - برنامه نویسی - آموزش مجازی
گرافیک - برنامه نویسی - آموزش مجازی

کاربر عزیز وارد پنل شوید
نام کاربری :
رمز عبور :
رمز عبور خود را فراموش کرده اید؟
کد مدل برای عکس ( Modal Image )

کد مدل برای عکس . با استفاده از این کد میتوانید بر روی عکس خود یک افکت زیبا ایجاد کنید . کد ها شامل انواع CSS , HTML و JavaScript است . تمامی کد ها خوانا بوده و می توانید به دلخواه تغییر دهید .

 

1.ابتدا کد های CSS زیر را در بین تگ های <style> و <style/> موجود در بین تگ های head قرار دهید .

2.کد های HTML و JavaScript را در مکان دلخواه بین تگ های <body> و <body/> قرار دهید .

 


 

CSS
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* پس زمینه مدل */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* محتوای مدل */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

/* عنوان عکس مدل */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* افزودن انیمیشن */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* دکمه بستن */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
HTML
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- مدل -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
JavaScript
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>




برچسب ها : آموزش برنامه نویسی وب , Web Coding , website , آموزش طراحی وبسایت , آموزش , آموزش مجازی , برنامه نویسی وبسایت , کد مدل عکس , کد مدل , مدل عکس , افکت برای عکس ,
بازدید : 16 تاریخ : 25 / 02 / 1396 زمان : 21:28 نویسنده : SOFTGROUP نظرات ()
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی

موضوعات مطالب

آموزشگاه
اندروید
جاوا
پروژه ها
نرم افزار های جانبی
Web Code
ads ads