اپیلیکیشن نمایش تصاویر با توضیحات(Cool Image Caption)

اپیلیکیشن نمایش تصاویر با توضیحات(Cool Image Caption)

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

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

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

  • Internet Explorer +۱۰—- Firefox +۶—-Chrome +۱۳—-Safari +۳.۲—-Opera +۱۱

HTML

ما ۶ تا عکس داریم که برای هر کدام استایل خاصی دارد پس کار را با نوشتن کد HTML آغاز می کنیم.

<div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them
 center and look proper in the browser ->  
    <!-- Image Caption 1 -->  
    <div id="box-1" class="box">  
        <img id="image-1" src="css3-image-captions/1.jpg"/>  
        <span class="caption simple-caption">  
        <p>Simple Caption</p>  
        </span>  
    </div>  

    <!-- Image Caption 2 -->  
    <div id="box-2" class="box">  
        <img id="image-2" src="css3-image-captions/2.jpg"/>  
        <span class="caption full-caption">  
        <h3>Full Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh
		euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>  

    <!-- Image Caption 3 -->  
    <div id="box-3" class="box">  
        <img id="image-3" src="css3-image-captions/3.jpg"/>  
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod
		tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>  

    <!-- Image Caption 4 -->  
    <div id="box-4" class="box">  
        <img id="image-4" src="css3-image-captions/4.jpg"/>  
        <span class="caption slide-caption">  
        <h3>Slide Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod
		tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>  

    <!-- Image Caption 5 -->  
    <div id="box-5" class="box">  
        <div class="rotate"><!-- Rotating div -->  
            <img id="image-5" src="css3-image-captions/5.jpg"/>  
            <span class="caption rotate-caption">  
            <h3>This is rotate caption</h3>  
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
			euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  
    </div>  

    <!-- Image Caption 6 -->  
    <div id="box-6" class="box">  
        <img id="image-6" src="css3-image-captions/6.jpg"/>  
        <span class="caption scale-caption">  
        <h3>Free Style Caption</h3>  
        <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod
		tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>  
</div> <!-- end of #mainwrapper-->

کد های CSS به خاطر داشته باشید که برای است فاده کردن از کد های CSS باید قطعه کد زیر را وارد نمایید.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

ابتدا با استفاده از mainwrapper رنگ و تنظیمات بصری صفحه اصلی را انجام می دهیم

html { background-color: #eaeaea; }  

#mainwrapper {  
  font: 10pt normal Arial, sans-serif;  
  height: auto;  
  margin: 80px auto 0 auto;  
  text-align: center;  
  width: 660px;  
}

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

#mainwrapper .box {  
    border: 5px solid #fff;  
    cursor: pointer;  
    height: 182px;  
    float: left;  
    margin: 5px;  
    position: relative;  
    overflow: hidden;  
    width: 200px;  
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
    -moz-box-shadow: 1px 1px 1px 1px #ccc;  
    box-shadow: 1px 1px 1px 1px #ccc;  
}  

#mainwrapper .box img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}

اکنون برای متنی که نمایش  داده میشود نیز کد های CSS مینویسیم تا ظاهر آن را نیز جالب بکنیم

#mainwrapper .box .caption {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
}

برای هر متنی که برای هرعکس نمایش داده میشود کد CSS خاصی مینویسیم تا مناسب با افکت آن باشد. متن ۱

#mainwrapper .box .simple-caption {  
    height: 30px;  
    width: 200px;  
    display: block;  
    bottombottom: -30px;  
    line-height: 25pt;  
    text-align: center;  
}

متن۲

#mainwrapper .box .full-caption {  
    width: 170px;  
    height: 170px;  
    top: -200px;  
    text-align: left;  
    padding: 15px;  
}

متن۳

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {  
    opacity: 0;  
    width: 170px;  
    height: 170px;  
    text-align: left;  
    padding: 15px;  
}

متن۴

** Caption 4: Slide **/  
#mainwrapper .box .slide-caption {  
    width: 170px;  
    height: 170px;  
    text-align: left;  
    padding: 15px;  
    left: 200px;  
}

متن۵

#mainwrapper #box-5.box .rotate-caption {  
    width: 170px;  
    height: 170px;  
    text-align: left;  
    padding: 15px;  
    top: 200px;  
    -moz-transform: rotate(-180deg);  
    -o-transform: rotate(-180deg);  
    -webkit-transform: rotate(-180deg);  
    transform: rotate(-180deg);  
}  

#mainwrapper .box .rotate {  
    width: 200px;  
    height: 400px;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}

متن۶

#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {  
    position: relative;  
    left: -200px;  
    width: 170px;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  

#mainwrapper .box .scale-caption h3 {  
    -webkit-transition-delay: 300ms;  
    -moz-transition-delay: 300ms;  
    -o-transition-delay: 300ms;  
    -ms-transition-delay: 300ms;  
    transition-delay: 300ms;  
}  

#mainwrapper .box .scale-caption p {  
    -webkit-transition-delay: 500ms;  
    -moz-transition-delay: 500ms;  
    -o-transition-delay: 500ms;  
    -ms-transition-delay: 500ms;  
    transition-delay: 500ms;  
}

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

#mainwrapper .box:hover .simple-caption {  
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    -webkit-transform: translateY(-100%);  
    transform: translateY(-100%);  
}

افکت۲:نمایش از بالا به پایین

#mainwrapper .box:hover .full-caption {  
    -moz-transform: translateY(100%);  
    -o-transform: translateY(100%);  
    -webkit-transform: translateY(100%);  
    transform: translateY(100%);  
}

افکت۳:محو شدن پس زمینه

#mainwrapper .box:hover .fade-caption {  
    opacity: 1;  
}

افکت۴:حرکت کشویی به سمت چپ

#mainwrapper .box:hover .slide-caption {  
  background-color: rgba(0,0,0,1) !important;  
  -moz-transform: translateX(-100%);  
  -o-transform: translateX(-100%);  
  -webkit-transform: translateX(-100%);  
  opacity: 1;  
  transform: translateX(-100%);  
}

هنگامی که موس روی این عکس میرود باید عکس نیز به سمت چپ بصورت کشویی حرکت کند لذا باید کد زیر را اعمال کنیم

#mainwrapper .box:hover img#image-4 {  
  -moz-transform: translateX(-100%);  
  -o-transform: translateX(-100%);  
  -webkit-transform: translateX(-100%);  
  transform: translateX(-100%);  
}

افکت۵:حرکت چرخشی

/** Rotate Caption :hover Behaviour **/  
    #mainwrapper .box:hover .rotate {  
    background-color: rgba(0,0,0,1) !important;  
    -moz-transform: rotate(-180deg);  
    -o-transform: rotate(-180deg);  
    -webkit-transform: rotate(-180deg);  
    transform: rotate(-180deg);  
}

افکت۶:زوم شدن و محو شدن عکس

#mainwrapper .box:hover #image-6 {  
   -moz-transform: scale(1.4);  
   -o-transform: scale(1.4);  
   -webkit-transform: scale(1.4);  
   transform: scale(1.4);

سپس باید متن از یک سمت مثلا چپ وارد صفحه شود لذا باید کد زیر را نیز اعمال کنیم

#mainwrapper .box:hover .scale-caption h3,  
#mainwrapper .box:hover .scale-caption p {  
    -moz-transform: translateX(200px);  
    -o-transform: translateX(200px);  
    -webkit-transform: translateX(200px);  
    transform: translateX(200px);  
}
+2
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>