TeneT » جی کوئری http://tenet.ir تازه های وب و تکنولوژی ، آموزشهای مرتبط با کامپیوتر ، برنامه نویسی و وب Fri, 06 Jan 2012 12:20:04 +0000 fa hourly 1 http://wordpress.org/?v=3.3.1 ساخت اسلاید شو برای وردپرس http://tenet.ir/1389/08/01/wordpress-thumbnails-slideshow/ http://tenet.ir/1389/08/01/wordpress-thumbnails-slideshow/#comments Sat, 23 Oct 2010 17:52:11 +0000 سیاوش کشمیری در ادامه ی پست  تصاویر بندانگشتی در وردپرس طبق قولی که داده بودم میریم سراغ ساختن یک اسلاید شو برای مطالب در وردپرس، برای این کار ما نیاز داریم که قالبی با پشتیبانی از تصاویر بند انگشتی داشته باشیم که آموزشش رو در پستی که در ابتدای توضیحاتم لینک دادم ، داشتیم.

برای ساخت اسلایدشو از جی کوئری استفاده خواهیم کرد و همین طور از پلاگین jQuery Cycle Plugin که یکی از کاربردی ترین پلاگین های جی کوئری هست…

برای اینکه ما از جی کوئری و پلاگین jQuery Cycle در قالب استفاده کنیم باید کارهای زیر رو انجام بدیم:

جی کوئری رو از لینک زیر دانلود کنیم:

http://docs.jquery.com/Downloading_jQuery

پیشنهاد من اینه که نسخه Minified رو دانلود کنید که یک min. قبل از js. داره و حجم کمتری نسبت به نسخه اصلی داره

و پلاگین Cycle رو هم  از لینک زیر دریافت کنید:

http://malsup.com/jquery/cycle/download.html

دو فایل جاوا اسکریپتی که دانلود کردیم رو داخل پوشه ی قالب مورد نظرمون ذخیره میکنیم . (میتونیم فایلها رو در فولدری با نام اختیاری در پوشه ی قالب ذخیره کنیم )

بعد نوبت میرسه به لود کردن این دو فایل در قالب، فایل header.php رو باز میکنیم و کدهای زیر رو در اون مینویسیم:

<script src="<?php bloginfo('template_directory'); ?>/jquery.min.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/jquery.cycle.all.min.js "></script>

نکته ۱: این کدها باید جایی بالاتر از تگ <head> قرار بگیرن.

نکته ۲: اگر فایلهای جاوااسکریپت رو در فولدری در زیر مجموعه ی فولدر قالب ذخیره کردین توجه داشته باشین که آدرس درستی به فایلها بدین، برای مثال اگر فایلها رو در فولدر js ذخیره کردین آدرس فایل جی کوئری ما به صورت زیر خواهد بود:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

خب تا اینجای کار رو که اکثر دوستانی که با تم ها سر و کار دارن حتمن بلد بودن و اگر هم نبودن انقدر ها سخت نبود که نفهمن، هرچند بقیه ی پست هم آنچنان پیچیده نخواهد بود :)

حالا فایل متنی زیر رو دانلود کنید و با فرمت php در فولدر قالب ذخیره کنید، یعنی فایلی با نام slideshow.php در فولدر قالب مورد نظر خواهیم داشت.

wp_slideshow

برای اینکه اسلاید شو رو در قسمتی که دوست داریم در قالب قرار بدیم، به قسمت مورد نظر سایتمون رفته و کد زیر رو وارد میکنیم:

<?php include(TEMPLATEPATH.'/slideshow.php')?>

کد بالا وارد فولدر قالب شده و slideshow.php رو در قسمتی که کد نوشته شده ایمپورت یا همان include  میکند.

نکته: نه تنها بهتره که الزامی هم هست که کد بالا رو داخل یک تگ با یک کلاس یا آی دی مشخص قرار بدین تا بتونین بهتر استایلش کنین، هرچند  میتونین از آی دی slideshow هم برای استایل قسمت مورد نظرتون استفاده کنید.

برای اینکه به پلاگین جی‌کوئی Cycle بفهمونیم که اسلایدشوی ما کدام قسمت صفحه مون هست باید آی دی تگ اسلاید شوی خودمون رو بهش بفهمونیم، برای اینکار میتونین از مثال های بسیار ساده و پرشمار سایت خود پلاگین در اینجا هم کمک بگیرید!

برای اینکار در جایی بالاتر از تگ هدر، که معمولن در فایل header.php قرار داره کد زیر رو وارد میکنیم:

 

<script>

jQuery(document).ready(function(){
jQuery(‘#slideshow’).cycle({

fx: ‘fade’,

timeout:4000
});
});

</script>

 

 

ما  در اینجا تگی با آی دی slideshow رو هدف قرار دادیم و افکت مورد نظرمون هم fade هست و روی هر عکس ۴ ثانیه صبر میکنه(میتونین در اینجا افکتهای مختلف این پلاگین رو ببینین و در کد خودتون اعمال کنید)  تمام آپشن های پلاگین هم در این صفحه قرار دارن، برای استفاده از هرکدام هم باید با یک , جداشون کنین.

]]> http://tenet.ir/1389/08/01/wordpress-thumbnails-slideshow/feed/ 28 یک افکت ساده و زیبای جی کوئری برای تصاویر http://tenet.ir/1388/09/05/creating-a-jquery-mouseover-hover-fade-effect/ http://tenet.ir/1388/09/05/creating-a-jquery-mouseover-hover-fade-effect/#comments Thu, 26 Nov 2009 23:00:58 +0000 سیاوش کشمیری سلام

من خیلی وقته پست جدید ندادم و مطالبم بعد از سری آموزشهای طراحی وردپرس دیگه بسیار کم شدند و ۲ دلیل بیشتر نداره!

اول اینکه هرچی میخوام بنویسم یا ترجمه کنم یک نفر از دوستان وبلاگنویس بهتر و کاملتر از من به اون موضوع میپردازن و دوم اینکه بسیار کم وقت دارم برای نوشتن توی وبلاگ! به هر حال امروز یه مطلب آموزشی جی کوئری مینویسم که خیلی دوستش دارم و توی آخرین طرحی که برای یکی از دوستان انجام گرفت ازش استفاده کردم(تقریبن!) برای استفاده از جی کوئری لازم نیست که بگم باید از سایت jQuery.com آخرین ورژن این کتابخانه ی فوق العاده رو دانلود کنید و باز هم لازم نیست که بگم باید این فایل js رو در صفحه وبتون باید وارد کنید(که همه ی اینها در دموی انتهای مطلب انجام شده و به راحتی میتونید تقلب کنید!)

ما میخواهیم یک کار ساده اما زیبا کنیم و اون اینه که یک عکس رو تبدیل کنیم به یک عکس دیگه (با حرکت اشاره گر موس به روی تصویر) برای این کار میتونیم از css و خاصیت background و با استفاده از یک hover ساده انجام بدیم اما ما میخواهیم که این تبدیل به صورت آرام و به قول اجنبی ها fade و animated باشه! خوب همونطور که گفتم اول جی کوئری رو وارد میکنیم:

 

<script type=’text/javascript’ src=’http://yoursite.com/jquery.js’></script>

 

توی این کد فرض شده که فایل جی کوئری در پوشه ی اصلی سایت آپلود شده مثل تمام زمان هایی که میخواهیم از جی کوئری استفاده کنیم باید یک یا چند تابع هم داشته باشیم:

<script>

$(document).ready(function(){

    $("img.a").hover( function() {

         $(this).stop().animate({"opacity": "0"}, "slow");

         }, function() {

         $(this).stop().animate({"opacity": "1"}, "slow");

    });

});

</script>

و استایل (سی اس اس) هم:

 

<style>

   div.fadehover { position: relative; }

   img.a { position: absolute; left: 0; top: 0; z-index: 10; } 

   img.b { position: absolute; left: 0; top: 0; }

</style>

 

و این هم کد اصلی صفحه ( کد html )

 

<div class=”fadehover”>

      <img src=”cbavota-bw.jpg” alt=”" class=”a” />

      <img src=”cbavota.jpg” alt=”" class=”b” />

</div>

 

توضیحات واضحات!

یک سری توضیحات کوچیک اما کلیدی میدم بقیش رو خودتون بفهمین دیگه!

در کد اول (تابع جی کوئری) به خط سوم دقت کنید:

 

$(“img.a”).hover()

 

ما اینجا تگ img رو که class اون a هست هدف قرار دادیم  و opacity هم شفافیت هست که عددی بین ۰ و ۱ میتونه باشه slow هم در زبان انگلیسی به معنای آرام میباشد!! یعنی آروم fade میشه!

استایل هم نیاز به توضیح نداره(حتمن توی سری آموزش طراحی وردپرس یاد گرفتین یه چیزایی)

در کد آخر( html) هم ما دوتا عکس _که آدرسشون رو باید دقت کنین درست وارد کنید_ قرار دادیم که در صفحه اصلیمون قرار بگیرن

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

jQuery fade effect demo

منبع،تقریبن!:bavotasan.com

]]> http://tenet.ir/1388/09/05/creating-a-jquery-mouseover-hover-fade-effect/feed/ 23