مای کدی برای زوم تصویر با افکت تاری و سایه

[میدوری]

با درود
برای نمایش تصویر بصورت کوچک شده در موضوع ها و بزرگ نمایی در همان جا مای کدی را که لازم داشتم درست کردم که برای دوستان هم به اشتراک می گذارم . با استفاده از این راه کار می توانید تصویر را با هر اندازه ای در جای مناسب آپلود کرده و آدرس را در داخل متغیر های این مای کد قرار دهید تا بتوانید در داخل موضوع تصویر را داشته باشید و در داخل موضوع هم بتوانید همان تصویر را با استفاده از اشاره گر بزرگ کنید . البته دو افکت فید و سایه هم برای زیبایی کار اضافه کردم که زیبا تر شود . نمونه ی زنده در تالار میدوری موجود است (زیباسازی بیشتر و تغییر اندازه ها بعهده ی شماست)
در صورت علاقه مند شدن مراحل زیر را اجرا کنید .
ابتدا به کنترل پنل خود بروید و در بخش پیکربندی وارد مای کد MyCode شوید و در آنجا افزودن MyCode جدید را انتخاب کنید .
به ترتیب بخش های زیر را پر کنید :
عنوان * : بزرگ نمایی تصویر
توضیح کوتاه * : بزرگ نمایی تصویر به همراه سایه و فید حساس به اشاره گر
عبارت منظم * :

کد php:

\[thumbshow\](.*?)\[/thumbshow\] 


جایگزین * :

کد php:

<style>
.zoom {
    opacity: 0.5;
    -webkit-transition: opacity .5s ease-in-out,
    -webkit-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    -moz-transition: opacity .5s ease-in-out,
    -moz-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    -o-transition: opacity .5s ease-in-out,
    -o-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    transition: opacity .5s ease-in-out,
    transform .5s ease-in-out,
    background-color 1s ease-in-out;
    height:200px;
    width:200px;
}
.zoom:hover {
    opacity: 1;
    -webkit-transform: scale(2.0);
    -moz-transform: scale(2.0);
    -o-transform: scale(2.0);
    transform: scale(2.0);
   background-color: #881100;
}
.pic {
  height: 150px;
  width: 150px;
  overflow: hidden;
  margin:0 auto;
  border: 5px solid white;
  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
}
.pic:hover {
  cursor: pointer;
}
</style>
<div class ="zoom pic"><img src="$1" height="150px" width="150px" alt="zoom"></div> 


با توجه به کاری که در بالا انجام شد از این به بعد هر موقع برای نمونه در ادیتور کد زیر را وارد کنید , باید تصویرهای داده شده در داخل این مای کد بصورت مات و در اندازه ی کوچک نمایش داده شوند .

کد php:

[thumbshow]آدرس تصویر مورد نظر[/thumbshow] 


یادداشت :
برای کوچک تر شدن و یا بزرگترشدن در دوحالت قبل و بعد از بزرگ نمایی و کلفتی حاشیه کادر و غیره , اعداد داده شده در کدهای استایل را بالا و پایین کنید تا به مورد نظر خودتان برسید .

منبع : تالار میدوری