آموزش -ms- – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Thu, 29 May 2014 08:29:31 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 دانلود پلاگین جی کوئری زوم بر روی تصاویر با 3 افکت زیبا + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html#comments Sat, 22 Mar 2014 19:01:50 +0000 http://xn--mgbguh09aqiwi.com/?p=1214 در ادامه آموزش های زبان Jquery , تصمیم گرفتم یک پلاگین بسیار حرفه ای و زیبا که این روز ها در سایت های زیادی از آن استفاده میود را در اختیار شما عزیزان قرار دهم .

این پلاگین که elevateZoom نام دارد , پلاگینی بسیار حرفه ای برای زوم کردن اتوماتیک در حالت Hover بر روی تصاویر یک وب سایت میباشد .

با استفاده از این پلاگین , دیگر نیازی به کلیک بر روی تصویر مورد نظر برای بزرگنمایی ندارید و فقط کافیست موس بر روی تصویر تغییر مکان دهد تا به صورت یک ذره بین , عمل بزرگ نمایی انجام شود .

این پلاگین دارای 3 افکت زیبا برای پیمایش روی تصاویر می باشد .

آموزش :

در ابتدا فایل های مورد نیاز رو از اینجا دانلود نمایید و سپس در روت سایت خود آپلود نمایید .

توجه فرمایید که تمامی آدرس ها به صورت پیش فرض برای قسمت روت ( root ) اصلی سایت میباشد و طبیعتا برای استفاده در پوشه ای خاص , باید آدرس دهی ها توسط شما عوض شوند .

حال در بالای صفحه ی خود و در بین دو تگ <head> و <head/> سایت خود , کد های زیر را قرار دهید .

<script src='js/jquery.js'></script>
<script src='js/jquery.elevatezoom.js'></script>

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

<img class="zoom" src="آدرس عکس کوچک" data-zoom-image="آدرس عکس بزرگ"/>

 توجه فرمایید که حتما باید عکس ها شبیه هم و فقط در دو اندازه کوچک و بزرگ باشند . اینکه چه اندازه ای باشند , دست خود شما میباشد و هر اندازه ای که بخواهید میتونید استفاده کنید .

برای مثال در دمویی که قرار داده شده , عکس کوچک در اندازه ( 250*400 ) و عکس بزرگ در اندازه ( 800*1280 ) می باشد . ( صرفا جهت اطلاع )

حال کافیست برای انجام هر افکت از 3 افکت قرار داده شده , تکه کد مربوط به اون رو در آخر کد html , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .

برای افکت زوم در صفحه ای جدید ( با قابلیت زوم اسکرول ) :

<script>
$(".zoom").elevateZoom({
	zoomWindowFadeIn: 500,
	zoomWindowFadeOut: 500,
	lensFadeIn: 500,
	lensFadeOut: 500,
        scrollZoom : true
});
</script>

 برای افکت زوم داخلی :

<script>
$(".zoom").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});
</script>

 و برای افکت زوم با استایل لنز :

$(".zoom").elevateZoom({
        zoomType: "lens",
        lensShape : "round",
        lensSize    : 200,
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});

دموی پلاگین

گرداوری : وحید مجیدی 

پخش اختصاصی

دانلود نمونه ی دموی آماده

[sdm_download id=”1234″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html/feed 25 آموزش بهینه سازی Css3 برای تمامی مرورگرها ( پیشوند های کمکی ) https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-css3-%d8%a8%d8%b1%d8%a7%db%8c-%d8%aa%d9%85%d8%a7%d9%85%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-css3-%d8%a8%d8%b1%d8%a7%db%8c-%d8%aa%d9%85%d8%a7%d9%85%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7.html#comments Tue, 11 Mar 2014 17:15:57 +0000 http://xn--mgbguh09aqiwi.com/?p=1163 چند سالی میشه که Css3 جایگاه مهمی در بین دیزاین های حرفه ای قالب ها پیدا کرده است .

اما همانطور که میدانید بجز مرورگر های IE 1 تا IE8 که به هیچ عنوان از css3 پشتیبانی نمیکنند . بقیه مرورگر ها , در ورژنهای قدیمی خود به دلیل اینکه Css3 یک قانون استاندارد نبود , برای نمایش آن باید از پیشوند های اختصاصی همان مرورگر برای نمایش Css3 استفاده کرد .

به دلیل اینکه هنوز کاربرانی از این ورژنهای قدیمی استفاده میکنند باید از این پیشوند ها در طراحی استفاده شود تا تمامی مرورگر های قدیمی و جدید از این امکام برخوردار شوند .

توجه : در زیر با خاصیت ها و پیشوند های مورد نیاز آشنا خواهید شد . اما باید در نظر داشته باشید که ما علاوه بر پیشوند ها , یک بار هم خود خاصیت رو بدون پیشوند ( برای مرورگرهای جدید ) به کار می بریم .

Selector{
    -webkit-Property:Value; /*برای مرورگر های کروم و سافاری*/
    -moz-Property:Value; /*برای مرورگر های فایرفاکس*/
    -o-Property:Value; /*برای مرورگرهای اپرا*/
    -ms-Property:Value; /*برای مرورگرهای اینترنت اکسپلورر*/
    Property:Value; /*برای تمامی مرورگرهای جدید*/
}

خاصیت هایی ( Property ) که باید از پیشود های بالا در آن استفاده کرد , به شرح زیر می باشد .

  •  Border-Radius 
  • Border-image
  •  background-size 
  •  Gradient 
  • Transform
  • Transition
  • Animation
  • keyframes@ برای انیمیشن ها استفاده میشود
  • Column
  • box-sizing

پخش اختصاصی 

گردآوری : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-css3-%d8%a8%d8%b1%d8%a7%db%8c-%d8%aa%d9%85%d8%a7%d9%85%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7.html/feed 5