استفاده از جی کوئری در قالب

[arman2012]

سلام دوستان من دارم یک قالبی طراحی می کنم ولی دفعه ی اولمه که از جی کوئری استفاده می کنم کسی هست که به من بگه چجوری می تونم جی کوئری رو وارد قالبم بکنم
مثلا من می خوام این اسلایدری که لینکش رو پایین گذاشتم رو بزارم اول از همه باید چه کاری انجام بدم.
برای دیدن اسلاید شو کلیک کنید
بعد یک سوال دیگه هم داشتم در باره ی این اسلاید شو و تمام اسلاید شو ها . می خواستم بدونم می شه برای کادر و دکمه طراحی کرد منظورم اینه که میشه عین قالب اول پی اس دی رو ساخت بعد برش داد بعد براش کد نویسی کرد . منظورم اینه که براش تو فوتوشاپ کادر و دکمه بسازم بعد برشش بدم بعد جی کوئری رو روش با سی اس اس بیارم؟

 

[pouya saadeghi]

اول اسکریپت jquery رو در قالبتون قرار بدید و بعد پلاگین موردنظر (همون اسلاید) رو آپلود کنید و از کدهاش استفاده کنید. تقریبا همه پلاگین های jquery آموزش و نمونه دارن.

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

بله اگه به CSS و HTML مسلط باشید میتونید اینکار رو بکنید.
این اسلاید شو ها از HTML و CSS و JS تشکیل شدن که با تغییر CSS و HTML میتونید ظاهرش رو تغییر بدید

 

[arman2012]

من به css و html مسلطم پس میشه این کار رو کرد
می شه توضیح بدید که دقیقا چجوری نصب میشه مثلا شما می خواید این اسلاید شویی که نمونه زدم رو نصب کنید من هر چی خوندم متوجه راه نصبش نشدم میشه یه توضیح بدید مخصوصا قسمت آخرش

 

[pouya saadeghi]

این سایت آدرس css و js رو کامل ننوشته بود:

<link href="http://dl.wordpress98.com/2011/05/Wordpress98%20style%20image%20and%20title%20scroller%20with%20jQuery/css/amazon_scroller.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="http://dl.wordpress98.com/2011/05/Wordpress98%20style%20image%20and%20title%20scroller%20with%20jQuery/js/jquery-1.3.2.min.js"></script>
<script type="http://dl.wordpress98.com/2011/05/Wordpress98%20style%20image%20and%20title%20scroller%20with%20jQuery/js/amazon_scroller.js"></script>

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

 <div id="amazon_scroller" class="amazon_scroller">
            <div class="amazon_scroller_mask">
                <ul>
                    <li><a href="link1" title="title1"><img src="images/scroller_large_1.jpg" width="60" height="60" alt="title"/></a></li>
                    <li><a href="link2" title="title2"><img src="images/scroller_large_2.jpg" width="60" height="60" alt="title"/></a></li>
                    <li><a href="link3" title="title3"><img src="images/scroller_large_3.jpg" width="60" height="60" alt="title"/></a></li>
                    <li><a href="link4" title="title4"><img src="images/scroller_large_4.jpg" width="60" height="60" alt="title"/></a></li>
                    <li><a href="link1" title="title5"><img src="images/scroller_large_1.jpg" width="60" height="60" alt="title"/></a></li>
                    <li><a href="link2" title="title6"><img src="images/scroller_large_2.jpg" width="60" height="60" alt="title"/></a></li>
                    <li><a href="link3" title="title7"><img src="images/scroller_large_3.jpg" width="60" height="60" alt="title"/></a></li>
                    <li><a href="link4" title="title8"><img src="images/scroller_large_4.jpg" width="60" height="60" alt="title"/></a></li>
                </ul>
            </div>
            <ul class="amazon_scroller_nav">
                <li></li>
                <li></li>
            </ul>
            <div style="clear: both"></div>
        </div>

کد جاوا اسکریپت که در فایل html قرار میگیره:

<script language="javascript" type="text/javascript">
$("#amazon_scroller").amazon_scroller({
                    scroller_title_show: 'enable',//enable  disable  
                    scroller_time_interval: '3000',
                    scroller_window_background_color: "#FFF",
                    scroller_window_padding: '10',
                    scroller_border_size: '2',
                    scroller_border_color: '#CCC',
                    scroller_images_width: '80',
                    scroller_images_height: '60',
                    scroller_title_size: '11',
                    scroller_title_color: '#000',
                    scroller_show_count: '3',
                    directory: 'images'
                });
</script>

 

[arman2012]

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

 

[pouya saadeghi]

ممنون فقط کد جاوا اسکریپت رو کجا باید بزارم توی هد یا توی خود بادی

در تگ head بذارید.

و یک چیز دیگه اینکه این دو دکمه ی این اسلایدر کجاست توی کد

<ul class="amazon_scroller_nav">
                <li></li>
                <li></li>
            </ul>

 

[arman2012]

ببخشید من هی سوال می پرسم ولی یه مشکلی هست من این کد جاوا اسکریپت به این بلندی رو می تونم توی هد بزارم ؟؟ می شه یه مثال برای من بزارید ممنون می شم

 

[pouya saadeghi]

اون سه خطی که اول گذاشتم رو تو head بذارید نه اون تگ اسکریپت رو.
تگ اسکریپت تو body می‌مونه

 

[arman2012]

آهان کم کم دارم می گیرم قضیه رو فقط این تگ اسکریپت که نباید جای خاصی باشه

 

[pouya saadeghi]

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

 

[arman2012]

فقط من یک سایتی رو دیدم که این رو توی هد هم گذاشته مثل مکس تمپ که این تگ اسکریپت
<script language="javascript" type="text/javascript"> $("#amazon_scroller").amazon_scroller({ scroller_title_show: 'enable',//enable disable scroller_time_interval: '3000', scroller_window_background_color: "#FFF", scroller_window_padding: '10', scroller_border_size: '2', scroller_border_color: '#CCC', scroller_images_width: '80', scroller_images_height: '60', scroller_title_size: '11', scroller_title_color: '#000', scroller_show_count: '3', directory: 'images' }); </script>
رو توی هد قرار داده

 

[pouya saadeghi]

معمولا وقتی اسکریپتمون فقط تعدادی function باشه، یا یه فایل اسکریپت external باشه، در head قرار میدیم. (اگه در body هم قرار بدیم مشکلی پیش نمیاد.)
اگه فایل سنگینه و دوست داید اول قالب لود بشه و بعد اسکریپت اجرا بشه، در انتهای صفحه بذارید.
از نظر بهینه سازی سرعت لود ، توصیه میشه اسکریپت در انتهای فایل (در تگ body) باشه.

 

[arman2012]

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

 

[pouya saadeghi]

هیچ تغییری در سرعت ایجاد نمیشه.
مسئله اینه که کدها خط به خط در مروگر اجرا میشن و اگه 500 خط html داشته باشیم و آخر کد ها اسکریپت های اسلاید رو بذاریم، اول قالب سایت لود میشه و بعد اسلاید شروع به کار میکنه.
من نگفتم "افزایش سرعت لود"، گفتم "بهینه سازی سرعت لود"

 

[arman2012]

بازم ممنون مرسی از راهنماییتون