جی کوئری – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Tue, 11 Jun 2019 07:44:50 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 اسکریپت اسلایدر تصاویر Nivo Slider https://www.xn--mgbguh09aqiwi.com/%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d8%a7%d8%b3%d9%84%d8%a7%db%8c%d8%af%d8%b1-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-nivo-slider.html https://www.xn--mgbguh09aqiwi.com/%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d8%a7%d8%b3%d9%84%d8%a7%db%8c%d8%af%d8%b1-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-nivo-slider.html#respond Mon, 12 Aug 2019 04:38:58 +0000 http://www.xn--mgbguh09aqiwi.com/?p=33519 Nivo Slider یک اسکریپت زیبا و پر طرفدار برای نمایش تصاویر به صورت اسلاید می باشد . شما از این اسکریپت میتوانید در طراحی ها و سایت خود استفاده نمایید.

اسکریپت اسلایدر تصاویر Nivo Slider

دانلود با لینک مستقیم

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d8%a7%d8%b3%d9%84%d8%a7%db%8c%d8%af%d8%b1-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-nivo-slider.html/feed 0 تبدیل تصاویر به صورت یک نقشه با MobilyMap https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d8%a8%d9%87-%d8%b5%d9%88%d8%b1%d8%aa-%db%8c%da%a9-%d9%86%d9%82%d8%b4%d9%87-%d8%a8%d8%a7-mobilymap.html https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d8%a8%d9%87-%d8%b5%d9%88%d8%b1%d8%aa-%db%8c%da%a9-%d9%86%d9%82%d8%b4%d9%87-%d8%a8%d8%a7-mobilymap.html#respond Sun, 11 Aug 2019 04:43:07 +0000 http://www.xn--mgbguh09aqiwi.com/?p=33515 MobilyMap یک افزونه jQuery می باشد که براحتی این امکان را به شما میدهد تا هر گونه تصویر را تبدیل به یک نقشه کنید. این سیستم به شما کمک میکند تا تصاویر دلخواه خود را شبیه به نقشه گوگل کنید! و بر روی هر نقطه از تصویر علامتگذاری کنید و توضیحاتی در رابطه با آن دهید.

تبدیل تصاویر به صورت یک نقشه با MobilyMap

 

دانلود با لینک مستقیم

]]> https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d8%a8%d9%87-%d8%b5%d9%88%d8%b1%d8%aa-%db%8c%da%a9-%d9%86%d9%82%d8%b4%d9%87-%d8%a8%d8%a7-mobilymap.html/feed 0 اسکریپت jQuery نمایش وضعیت آب و هوا Flat Weather https://www.xn--mgbguh09aqiwi.com/%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-jquery-%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-flat-weather.html https://www.xn--mgbguh09aqiwi.com/%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-jquery-%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-flat-weather.html#respond Thu, 03 Sep 2015 07:25:51 +0000 http://www.xn--mgbguh09aqiwi.com/?p=12053 Flat Weather یک اسکریپت به صورت جاوا اسکریپت (جی کوئری) می باشد که با نصب آن قادر هستید وضعیت آب و هوای شهر دلخواه خود را با استفاده از خروجی وب سایت openweathermap.com در سایت خود نمایش دهید. این اسکریپت جی کوئری قادر است وضعیت هوای شهر دلخواه شما را از یک تا شانزده روز آینده را نمایش دهد. از قابلیت های کلیدی این اسکریپت می توان به استفاده آسان و ساده ، قابلیت استفاده در وب سایت های استاتیک و دینامیک ، قابلیت استفاده از آیکن های دلخواه برای نمایش وضعیت و وجود بسیاری از شهر های ایران اشاره نمود.

اسکریپت jQuery نمایش وضعیت آب و هوا Flat Weather

 

دموی اسکریپت

دانلود اسکریپت jQuery نمایش وضعیت آب و هوا Flat Weather

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-jquery-%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-flat-weather.html/feed 0 نمایش وضعیت آب و هوا با پلاگین جی کوئری Ideabox https://www.xn--mgbguh09aqiwi.com/%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-%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-ideabox.html https://www.xn--mgbguh09aqiwi.com/%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-%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-ideabox.html#respond Sun, 23 Aug 2015 18:20:56 +0000 http://www.xn--mgbguh09aqiwi.com/?p=11632 Ideabox یک پلاگین جی کوئری می باشد که با نصب آن قادر هستید وضعیت آب و هوای شهر دلخواه خود را با استفاده از خروجی وب سایت openweathermap.com در سایت خود نمایش دهید.

این اسکریپت جی کوئری قادر است وضعیت هوای شهر دلخواه شما را از یک تا شانزده روز آینده را نمایش دهد. از قابلیت های کلیدی این اسکریپت می توان به استفاده آسان و ساده ، قابلیت استفاده در وب سایت های استاتیک و دینامیک ، قابلیت استفاده از آیکن های دلخواه برای نمایش وضعیت و وجود بسیاری از شهر های ایران اشاره نمود.

نمایش وضعیت آب و هوا با پلاگین جی کوئری Ideabox

دموی پلاگین

دانلود پلاگین وضعیت آب و هوا ideabox

]]> https://www.xn--mgbguh09aqiwi.com/%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d8%a2%d8%a8-%d9%88-%d9%87%d9%88%d8%a7-%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-ideabox.html/feed 0 دانلود پلاگین جی کوئری زوم بر روی تصاویر با 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 دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html#comments Thu, 23 Jan 2014 10:48:11 +0000 http://xn--mgbguh09aqiwi.com/?p=991 حتما براتون پیش اومده که قسمتی از سایتتون دارای اسکرول باشد و میدونید که اسکرول بار های پیش فرض مرور گرها , بسیار ساده و قطعا کل دیزای سایت شمارو بهم زده و از بین میبرند .

پلاگین های زیادی در این باره در محیط وب قرار داده شده که متاسفانه خیلی از اونها خراب و تعداد کمی هم که سالم هستند اما به دلیل عدم آشنایی بعضی از وبمستران عزیز با Jquery , آموزش نصفه نیمه ای در مورد پلاگین بیان میکنند و قطعا به درد کاربر نمیخورد .

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

در این پست , هم آموزش کامل نصب ابن پلاگین ها و هم نمونه باکس طراحی شده گنجانده شده است .

برای این کار ابتدا شما نیاز به 1 فایل Css و 4 فایل Jquery دارید . من برای راحتی و زیبایی کار این 5 فایل رو در پوشه های مخصوص با موضوع خودشون قرار دادم . یعنی فایل Css در پوشه Css و 4 فایل Jquery رو در پوشه ی Jquery قرار دادم.

ابتدا این دو پوشه رو از اینجا دانلود کنید و سپس در روت سایت خود قرار دهید . (طبیعتا تمامی آدرس دهی ها به نسبت Root سایت انجام شده و اگر شما بخواهید در پوشه های دیگر استفاده کنید , باید آدرس های فایل رو تغییر دهید . البته پیشنهاد میشود این کار رو انجام ندهید )

حال نوبت آموزش می باشد …

در ابتدا شما باید در صفحه ویا صفحاتی که میخواهید این اسکرول بار رو استفاده کنید , این 5 فایل رو بهش بشناسونید .

برای این کار ابتدا در بین دو تگ <head> و <head/> , باید با کد زیر, Css رو بشناسونید .

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

حال نوبت شناسایی فایل های Jquery به صفحه میباشد .

در 2 تا مانده به آخرین خط صفحه ( یعنی قبل از دو تگ <html/> و <body/> ) , کد های زیر رو کپی کنید .

	<script src="jquery/jquery-1.7.2.min.js"></script>
	<script src="jquery/jquery-ui-1.8.21.custom.min.js"></script>
	<script src="jquery/jquery.mousewheel.min.js"></script>
	<script src="jquery/jquery.mCustomScrollbar.js"></script>
	<script>
		(function($){
			$(window).load(function(){
				$(".content").mCustomScrollbar({
					scrollButtons:{
						enable:false
					}
				});
			});
		})(jQuery);
	</script>

طبیعتا برای اعمال این پلاگین بر روی سایت خود , باید یک Div بسازید تا باکس ساخته شده رو با آی دی و یا کلاس , به این پلاگین متصل کنید .

برای این کار یک Div به عنوان نمونه با کلاس content بسازید . برای این کلاس حتما یک Height مشخص بدهید . این کار برای اینست که با زیاد کردن اطلاعات و نوشیته های داخل Div , از یک ارتفاعی به بعد , اسکرول  بار لحاظ و نمایش داده شود . چون اگر یک ارتفاع مشخص ندهید , به میزان اطلاعات داخل , Div هم کشیده میشود و اصلا اسکرول نمی اندازد .

نکته مهم : برای Div خود هر کلاس و یا آی دی که انتخاب میکنید , حتما باید نام آن را جایگزین نام فعلی $(“content.”) که در بالا نوشته شده است بکنید . بدیهی است اگر آی دی انتخاب کردید , باید

$("#content").mCustomScrollbar({

و اگر به مانند مثال بالا از کلاس استفاده کردید , باید

$(".content").mCustomScrollbar({

را جایگذین کنید .

آموزش های مربوط به دیزاین :

شما به راحتی میتوانید موقعیت مکانی و رنگ های مربوط به اسکرول را به دلخواه خود تغییر دهید.

برای این کار , پس از نصب پلاگین , وارد فایل Css با آدرس زیر شوید :

css/jquery.mCustomScrollbar.css

این فایل رو با NotePad و یا DreamWeaver باز کنید . حال با توجه به اطلاعات زیر , دیزاین را تغییر دهید :

1 – فاصله از سمت راست Div = خط 3

2 – پهنا و ارتفاع خط کمرنگ و زمینه اسکرول بار = خط 29 و 30

2 – پهنا و ارتفاع خط ضخیم و اصلی اسکرول بار = خط 43 و 44

4 – شفافیت حالت معمولی و حالت Hover = خط 137 و 140

5 – تغییر رنگ ها = خطهای 143 و 147 و 151 و 156

توجه : 5 نکته ی بالا فقط مهمترین خصوصیات قسمت های Css این پلاگین میباشد . طبیعتا اگر با کدهای Css آشنایی کامل دارید , میتوانید تغییرات بسیار بیشتری در دیزاین بدهید .

پخش اختصاصی

آموزش : وحید مجیدی 

دانلود نمونه آماده این پلاگین , جهت آشنایی بیشتر

[sdm-download id=”997″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html/feed 12