مهمان عزیز خوش آمدید. ورود ثبت نام



صفحه‌ها (2):
امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
css آموزش گالری ساخت با

آموزش ساخت گالری با css
کد:
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.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 (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

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

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

/* The Close Button */
.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%;
}
}
</style>
</head>
<body>



<img id="myImg" src="img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

<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;
modalImg.alt = this.alt;
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>

</body>
</html>


فایل‌های پیوست
تصاویر بندانگشتی
       


طراحی انجمن اختصاصی
طراحی وب سایت فروشگاهی ، خبری ، شرکتی
بهینه سازی کلمات ، لینک یک تا پنج صفحه اول با ضمانت کتبی
راه ارتباطی : 
info@kishikala.com
it@granigah.ir
حاجی هادی
پاسخ
درود
نکات :
1 - یک شات یا نمونه آنلاین قرار بدید .
2 - آدرس تصاویر را اصلاح کنید .
Heart


اس جی دیزاینر
بپرسم ؛ محلی برای آموزش و رفع مشکلات
=====================
طراحی انواع سایت ، قالب ، ترجمه ی قالب و افزونه و .... .
My Id : soltaneghalbha2008
پاسخ
عرض ادب فایل پیوست شد Cool


طراحی انجمن اختصاصی
طراحی وب سایت فروشگاهی ، خبری ، شرکتی
بهینه سازی کلمات ، لینک یک تا پنج صفحه اول با ضمانت کتبی
راه ارتباطی : 
info@kishikala.com
it@granigah.ir
حاجی هادی
پاسخ
ببخشید الآن این چیه؟؟؟


مهم بودن رو فراموش کن!
تیتر روزنامه ی یکشنبه، زباله ی روز دوشنبه است…
به قصد کمک پاسخ بدید، نه رقابت
-----------------------------------

آشپزخانوم
ایده های جدید در پخت غذا
ashpazkhanoom.ir
پاسخ
با سلام
لطفا دمو رو بذارید.
هیچ عکس و دمویی وجود نداره.بذارید تا کاربران کامل ببینند.
موفق باشید.


پاسخ
فایل کد آپدیت شد ، کد های جاوا اسکریپت قرار داده شد

نمونه قرار داده شد

یه عکس برای نمایش تست هم پیوست شد

Heart


طراحی انجمن اختصاصی
طراحی وب سایت فروشگاهی ، خبری ، شرکتی
بهینه سازی کلمات ، لینک یک تا پنج صفحه اول با ضمانت کتبی
راه ارتباطی : 
info@kishikala.com
it@granigah.ir
حاجی هادی
پاسخ
(۲۱ بهمن ۱۳۹۴، ۱۰:۲۶ ق.ظ)ashpazkhanoom نوشته:  ببخشید الآن این چیه؟؟؟

 
این گالری عکس هست به صورت لایت باکس


طراحی انجمن اختصاصی
طراحی وب سایت فروشگاهی ، خبری ، شرکتی
بهینه سازی کلمات ، لینک یک تا پنج صفحه اول با ضمانت کتبی
راه ارتباطی : 
info@kishikala.com
it@granigah.ir
حاجی هادی
پاسخ
ببخشید من متوجه نشدم
توی شاتی که گذاشتید فقط یه عکسه. گالری نیستش که!!
ممنون


مهم بودن رو فراموش کن!
تیتر روزنامه ی یکشنبه، زباله ی روز دوشنبه است…
به قصد کمک پاسخ بدید، نه رقابت
-----------------------------------

آشپزخانوم
ایده های جدید در پخت غذا
ashpazkhanoom.ir
پاسخ
عزیز کد های بالا برای چی هست دقیقا ؟

کد ها رو درون سایتتون قرار بدید ، نتیجش رو ببنید

دمو آنلاین ندارم براتون بذارم متاسفانه


طراحی انجمن اختصاصی
طراحی وب سایت فروشگاهی ، خبری ، شرکتی
بهینه سازی کلمات ، لینک یک تا پنج صفحه اول با ضمانت کتبی
راه ارتباطی : 
info@kishikala.com
it@granigah.ir
حاجی هادی
پاسخ
(۲۳ بهمن ۱۳۹۴، ۰۸:۳۵ ب.ظ)آشپزخانم نوشته:  ببخشید من متوجه نشدم
توی شاتی که گذاشتید فقط یه عکسه. گالری نیستش که!!
ممنون


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


فایل‌های پیوست

.zip   DEMO.zip (اندازه 21.21 KB / تعداد دانلود: 3)


طراحی انجمن اختصاصی
طراحی وب سایت فروشگاهی ، خبری ، شرکتی
بهینه سازی کلمات ، لینک یک تا پنج صفحه اول با ضمانت کتبی
راه ارتباطی : 
info@kishikala.com
it@granigah.ir
حاجی هادی
پاسخ
صفحه‌ها (2):


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش کامل Border-Radius mhdbadboy 0 749 ۰۵ اردیبهشت ۱۳۹۳، ۱۲:۴۷ ب.ظ
آخرین ارسال: mhdbadboy
Thumbs Up آموزش گردکردن عکس behnam 1 1,299 ۲۲ شهریور ۱۳۹۲، ۱۲:۵۰ ب.ظ
آخرین ارسال: rahnamafard
  آموزش بکگراند متحرک (انیمیشن با CSS) ••CentOS•• 0 1,870 ۲۱ شهریور ۱۳۹۲، ۱۰:۰۹ ب.ظ
آخرین ارسال: ••CentOS••
  آموزش انیمیشن در CSS سری 2 ••CentOS•• 0 1,132 ۱۹ شهریور ۱۳۹۲، ۰۷:۲۱ ب.ظ
آخرین ارسال: ••CentOS••
  آموزش انیمیشن در CSS ••CentOS•• 2 1,903 ۱۹ شهریور ۱۳۹۲، ۰۷:۰۸ ب.ظ
آخرین ارسال: ••CentOS••
Star آموزش گرد کردن تصاویر با استفاده از css KoG 0 2,428 ۰۹ تير ۱۳۹۲، ۰۴:۵۶ ب.ظ
آخرین ارسال: KoG
  آموزش Blur کردن متن با css KoG 0 1,591 ۰۹ تير ۱۳۹۲، ۰۴:۴۳ ب.ظ
آخرین ارسال: KoG
  ساخت آنلاین گرادینت با css KoG 2 2,484 ۲۲ اردیبهشت ۱۳۹۲، ۰۱:۱۲ ب.ظ
آخرین ارسال: ••CentOS••

پرش به انجمن:


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

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir