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



صفحه‌ها (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>


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


طراحی انجمن ، وب سایت شخصی ، سایت خبری ، فروشگاهی

وب سایت طراحی وب : http://www.kishikala.com/team-design

فروشگاه : http://www.kishikala.com

بهینه سازی سایت با کمترین هزینه ، 3 تا 8 کلمه صفحه اول و صفحه دوم گوگل

با ضمانت کتبی ،
پاسخ
درود
نکات :
1 - یک شات یا نمونه آنلاین قرار بدید .
2 - آدرس تصاویر را اصلاح کنید .
Heart


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


طراحی انجمن ، وب سایت شخصی ، سایت خبری ، فروشگاهی

وب سایت طراحی وب : http://www.kishikala.com/team-design

فروشگاه : http://www.kishikala.com

بهینه سازی سایت با کمترین هزینه ، 3 تا 8 کلمه صفحه اول و صفحه دوم گوگل

با ضمانت کتبی ،
پاسخ
ببخشید الآن این چیه؟؟؟


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

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


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

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

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

Heart


طراحی انجمن ، وب سایت شخصی ، سایت خبری ، فروشگاهی

وب سایت طراحی وب : http://www.kishikala.com/team-design

فروشگاه : http://www.kishikala.com

بهینه سازی سایت با کمترین هزینه ، 3 تا 8 کلمه صفحه اول و صفحه دوم گوگل

با ضمانت کتبی ،
پاسخ
(۲۱ بهمن ۱۳۹۴، ۱۰:۲۶ ق.ظ)ashpazkhanoom نوشته:  ببخشید الآن این چیه؟؟؟

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


طراحی انجمن ، وب سایت شخصی ، سایت خبری ، فروشگاهی

وب سایت طراحی وب : http://www.kishikala.com/team-design

فروشگاه : http://www.kishikala.com

بهینه سازی سایت با کمترین هزینه ، 3 تا 8 کلمه صفحه اول و صفحه دوم گوگل

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


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

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

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

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


طراحی انجمن ، وب سایت شخصی ، سایت خبری ، فروشگاهی

وب سایت طراحی وب : http://www.kishikala.com/team-design

فروشگاه : http://www.kishikala.com

بهینه سازی سایت با کمترین هزینه ، 3 تا 8 کلمه صفحه اول و صفحه دوم گوگل

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


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


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

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


طراحی انجمن ، وب سایت شخصی ، سایت خبری ، فروشگاهی

وب سایت طراحی وب : http://www.kishikala.com/team-design

فروشگاه : http://www.kishikala.com

بهینه سازی سایت با کمترین هزینه ، 3 تا 8 کلمه صفحه اول و صفحه دوم گوگل

با ضمانت کتبی ،
پاسخ
صفحه‌ها (2):


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش کامل Border-Radius mhdbadboy 0 642 ۰۵ اردیبهشت ۱۳۹۳، ۱۲:۴۷ ب.ظ
آخرین ارسال: mhdbadboy
Thumbs Up آموزش گردکردن عکس behnam 1 1,119 ۲۲ شهریور ۱۳۹۲، ۱۲:۵۰ ب.ظ
آخرین ارسال: rahnamafard
  آموزش بکگراند متحرک (انیمیشن با CSS) ••CentOS•• 0 1,522 ۲۱ شهریور ۱۳۹۲، ۱۰:۰۹ ب.ظ
آخرین ارسال: ••CentOS••
  آموزش انیمیشن در CSS سری 2 ••CentOS•• 0 957 ۱۹ شهریور ۱۳۹۲، ۰۷:۲۱ ب.ظ
آخرین ارسال: ••CentOS••
  آموزش انیمیشن در CSS ••CentOS•• 2 1,709 ۱۹ شهریور ۱۳۹۲، ۰۷:۰۸ ب.ظ
آخرین ارسال: ••CentOS••
Star آموزش گرد کردن تصاویر با استفاده از css KoG 0 2,122 ۰۹ تير ۱۳۹۲، ۰۴:۵۶ ب.ظ
آخرین ارسال: KoG
  آموزش Blur کردن متن با css KoG 0 1,437 ۰۹ تير ۱۳۹۲، ۰۴:۴۳ ب.ظ
آخرین ارسال: KoG
  ساخت آنلاین گرادینت با css KoG 2 2,125 ۲۲ اردیبهشت ۱۳۹۲، ۰۱:۱۲ ب.ظ
آخرین ارسال: ••CentOS••

پرش به انجمن:


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

1 مهمان


درباره‌ی ما

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