به نام خدا

استفاده از پلاگین جی کوئری ساخت اسلاید شو Canvas در HTML5

(create slideshow in html)

دمو

۱

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

jquery-1.3.2.min.js

webwidget_slideshow_html5_simple.js

 

  • سپس کد زیر را در قسمت ابتدایی صفحه و در تگ head قرار دهید:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="js/webwidget_slideshow_html5_simple.js"></script>

 

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

 

  • سپس کد زیر را در همان محل وارد نمایید:
<script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_slideshow_html5_simple").webwidget_slideshow_html5_simple({
                    slideshow_transition_effect: 'Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind,Wipe_from_vertical_center,Wipe_from_horizontal_center,Wipe_to_horizontal_center,Wipe_to_vertical_center,Wipe_from_bottom_to_top,Wipe_from_top_to_bottom,Wipe_from_right_to_left',
                    slideshow_time_interval: '4000',
                    slideshow_window_width: '500',
                    slideshow_window_height: '400',
                    slideshow_background_color: '#FFF',
                    slideshow_border: '#999 solid 2px',
                    text_effect: 'text_fade'
                });
            });
        </script>

 

  • در انتها کدهای html زیر را در صفحه مورد نظر قرار می دهید:
<div id="webwidget_slideshow_html5_simple">
	<ul>
		<li>
			<a href="#"><img src="images/slideshow_large_1.jpg" alt="Sky" /></a>
		</li>
        <li>
			<img src="images/slideshow_large_2.jpg" alt="Sea" />
		</li>
		<li>
			<a href="#"><img src="images/slideshow_large_3.jpg" alt="Flower" /></a>
		</li>
		<li>
			<a href="#"><img src="images/slideshow_large_4.jpg" alt="Tree" /></a>
		</li>
		<li>
			<a href="#"><img src="images/slideshow_large_1.jpg" alt="Sky" /></a>
		</li>
		<li>
			<a href="#"><img src="images/slideshow_large_2.jpg" alt="Sea" /></a>
		</li>
		<li>
			<a href="#"><img src="images/slideshow_large_3.jpg" alt="Flower" /></a>
		</li>
		<li>
			<a href="#"><img src="images/slideshow_large_4.jpg" alt="Tree" /></a>
		</li>
        <li>
			<a href="#"><img src="images/slideshow_large_1.jpg" alt="Sky" /></a>
		</li>
		<li>
			<a href="#"><img src="images/slideshow_large_2.jpg" alt="Sea" /></a>
		</li>
	</ul>
</div>

 

در کد بالا شما می توانید نام و آدرس تصاویر خود را قرار دهید، و برای اضافه کردن تصویر کافیست به ازای هر تصویر یک تگ <li></li> جدید ایجاد کنید و تگ های مربوط به لینک و عکس مورد نظر را وارد نمایید.

 

  • لازم به ذکر است که کدهای مرحله ۲ و۳ ، باید در صفحه php تم مورد نظر و در بین تگ Head قرار گیرد.

 

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.