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

تمامی این توابع دارای افکت های css3 و Jquery میباشند که زیبایی دو چندانی به آن بخشیده .

با ما در ادامه مطلب همراه باشید .

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

در فایل دانلودی , یک فایل css و یک فایل js می باشد که باید با دو تگ link و script آنها را به وب سایت خود ضمیمه نمایید .

<script src="آدرس فایل"></script>
<link href="آدرس فایل" rel="stylesheet">

حال میتوانید از توابع زیر برای نمایش استفاده نمایید :

مدل ساده پیغام

swal("اسکریپت دات کام")

مدل ساده پیغام با توضیحات

swal("اسکریپت دات کام", "وحید مجیدی")

مدل حرفه ای پیغام با توضیحات و انیمیشن موفقیت آمیز بودن کار

swal("Good job!", "You clicked the button!", "success")

مدل حرفه ای کانفرم یا همان تایید کردن توسط کاربر

swal({
	title: "اسکریپت دات کام",
	text: "وحید مجیدی", 
    type: "warning",
	showCancelButton: true,
	confirmButtonColor: "#DD6B55",
	confirmButtonText: "بله",
	cancelButtonText: "خیر",   
	closeOnConfirm: false,   
	closeOnCancel: false
	}, 
function(isConfirm){
	if (isConfirm){
		swal(
			"موفقیت آمیز", 
			"موفقیت آمیز",
			"success");
		} else {     
		swal("ناموفق",
			"ناموفق", 
			"error");   
		}
	});

مدل ساده پیغام با توضیحات و عکس دلخواه

swal({ 
	title: "اسکریپت دات کام",
	text: "وحید مجیدی",
	imageUrl: "images/vms.jpg"  // آدرس عکس اینجا وارد شود
});

مدل پیغام ساده با توضیحات و اجازه وارد کردن تگ های اچ تی ام ال در آن

swal({
	title: "<h1>اسکریپت دات کام</h1>",
	text: "وحید <span style="color:red">مجیدی<span> صدر",
	html: true
});

مدل پیغام ساده با توضیحات و بسته شدن اتوماتیک بعد دو ثانیه

swal({
	title:"اسکریپت دات کام",
	text: "صفحه به صورت خودکار بسته میشود",   
	timer: 2000,  
    showConfirmButton: false
});

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

swal({
	title: "اسکریپت دات کام",
	text: "وحید مجیدی",
	type: "input",
	showCancelButton: true,
	closeOnConfirm: false,
	animation: "slide-from-top",
	inputPlaceholder: "در اینجا وارد نمایید" },
function(inputValue){
	if (inputValue === false) return false;
	if (inputValue === "") {
		swal.showInputError("حتما باید وارد شود");
		return false
	}
	swal("Nice!", "شما نوشته اید : " + inputValue); });

توجه : توابع بالا به محض باز شدن سایت باز میشوند . طبیعتا باید آنها را در رویدادهای جی کوئری قرار دهید . مثلا اگر میخواهید بعد از کلیک نمایش داده شود :

$(document).ready(function(){
    $("button#vms").click(function(){
        یکی از توابع بالا در اینجا قرار بگیرد
    });
});

نکته : در تمام کد های بالا , نوشته های فارسی را میتوانید با توجه دلخواه خود تغییر نمایید .

برای مشاهده بقیه پارامتر ها به این لینک مراجعه فرمایید .

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

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

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

نحوه ی استفاده از این پلاگین بسیار راحت میباشد .

ابتدا باید دو فایل Jquery مربوطه را از این لینک دانلود نمایید و با استفاده از تگ script به وب سایت خود اضافه نمایید .

حال باید کد جی کوئری زیر را در وب سایت خود وارد نمایید ( ترجیحا در انتهای وب سایت )

$(document).ready(function(e) {
    $(".vms").faceCursor({
	perspective:"6rem"
    });
});

توجه : در کد بالا میتوانید به جای مقدار 6 , عددی کمتر و یا بیشتر وارد نمایید . ( این عدد مشخص کننده مقدار حالت سه بعدی می باشد )

نکته بسیار مهم : در کد بالا فرض بر این قرار داده شده که اشیایی که میخواهید به حرکت در بیایند , دارای کلاس vms میباشند . طبیعتا میتوانید به جای آن , هر انتخابگر دیگری از css را وارد نمایید . مثلا آی دی test که میشود test# و یا …

دموی پلاگین

دانلود فایل آماده دموی پلاگین

پخش اختصاصی

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

این پلاگین به شما کمک میکند که از این خراب کاری جلوگیری کرده و عکس های شمارو با افکتی بسیار زیبا و در همان صفحه ( مانند سایت فیسبوک و همچنین خود سایت اسکریپت دات کام ) نمایش دهد .

ویژگیهای این پلاگین :

نمایش در تمامی مرورگرها

دارای افکت های زیبا و حرفه ای

امکان درج شرح مختصر ر زیر هر عکس

امکان گروه بندی عکس ها برای نمایش پشت سر هم ( اسلاید شو )

و اما آموزش :

ابتدا فایل های مربوط به پلاگین را از اینجا دانلود کنید و در روت سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی public_html و یا www )

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

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

<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
<script src="js/modernizr.custom.js"></script>

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

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

 حال کافیست که عکس های خود را به شیوه ی زیر کدنویسی کنید ( یعنی فرمت زیر را دارا باشند )

<a href="آدرس عکس بزرگ" data-lightbox="vahid-majidi" title="شرح کوتاهی در مورد عکس"><img src="آدرس عکس کوچک"/></a>

 توضیحات :

 1 – داشتن 2 اندازه بزرگ و کوچک برای یک عکس به این دلیل است که هنگام بارگذاری صفحات سایت شما , ابتدا عکس کوچک و حجم کم بارگذاری شود و پس از کلیک بر روی عکس , عکس بزرگتر که دارای حجم بیشتری هست بارگذاری شود . 

ضمنا میتوانید هر دو آدرس رو یکی قرار دهید . یعنی در هر دو صورت , یک عکس بارگذاری شود که مسلما روش بالا بهتر است .

2 – با نوشتن شرح کوتاه در اتربیوت title , میتوانید در زیر هر عکس , شرحی در مورد همان عکس را به نمایش بگذارید .

3 – گاهی میخواهید با کلیک بر روی یک عکس , عکس های دیگری که در همان گروه تصویری هستند را به صورت اسلاید شو , به کاربران نشان دهید . کافیست در اتربیوت data-lightbox , یک نام به دلخواه انتخاب نمایید و برای دیگر عکس های همان گروه تصویری هم , همان نام را تکرار کنید . به همین سادگی چند عکس را در یک گروه تصویری برای اسلاید شو قرار میدهید .

به عنوان مثال :

<a href="img/demopage/image-1.jpg" data-lightbox="vahid" title="عکس شماره یک"><img src="img/demopage/thumb-1.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-2.jpg" data-lightbox="vahid" title="عکس شماره دو"><img src="img/demopage/thumb-2.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-3.jpg" data-lightbox="majidi" title="عکس شماره سه"><img src="img/demopage/thumb-3.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-4.jpg" data-lightbox="majidi" title="عکس شماره چهار"><img src="img/demopage/thumb-4.jpg" width="150" height="150"/></a>

 همان طور که در بالا میبینید , دو عکس اول در یک گروه و دو عکس دوم در یک گروه دیگر قرار گرفتند …

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

پخش اختصاصی 

دموی پلاگین

دانلود نمونه پلاگین به صورت آماده

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