رفتن به مطلب

طریقه اضافه کردن یک اسلایدر جیکوئری


پست های پیشنهاد شده

سلام به همه دوستان

راستش من یک اسلایدر جیکوئری پیدا کردم ... خیلی زیباست ...

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-simple-itunes-like-slider/

بعد راستش دقیقا طرز استفاش رو نمیدونم ... منظروم کد ها هستن ... اگه میشه یه راهنمایی کنید که کد هارو دقیقا کجا بزارم ...

لینک به ارسال

اول استایلش رو لینک داده:


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


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mocha.js"></script>

با این دو تا دستور هم فایل های جی کوئری رو اتصال داده. شما بهتره اینا رو تو تگ head بزاری.

محتویات پوشه demo رو هم که کپی کنید دیگه مشکلی نباید باشه.

اینم نمونه کد که تو صفحه اصلی استفاده شده:


<div id="container">
<h1>Create a simple iTunes-esque slider with jQuery</h1>
<div>by Siddharth for the lovely folks at Net Tuts</div>
<p>A simple slider/slideshow which mostly emulates the one on iTunes barring a few changes. Click the down button to cycle the images.</p>

<div id="gallery">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
</div>

<div id="thumbs">
<img src="img/11.jpg" />
<img src="img/22.jpg" />
<img src="img/33.jpg" />
<img src="img/44.jpg" />
<img src="img/55.jpg" />
<img src="img/66.jpg" />
</div>

<a href="#" id="next"></a>
</div>

لینک به ارسال

این 3 خط رو در هدر اضافه کنید :


<link rel="stylesheet" href="http://www.youp.ir/dl9/1379929196571.css" type="text/css" />

<script type="text/javascript" src="http://www.youp.ir/dl9/1379929137931.js"></script>
<script type="text/javascript" src="http://www.youp.ir/dl9/1379929137952.js"></script>

این هم فراخوانی :


<div id="gallery">
<img src="http://www.youp.ir/photo3/1379928191894.jpg" />
<img src="http://www.youp.ir/photo3/1379928191833.jpg" />
<img src="http://www.youp.ir/photo3/1379928191782.jpg" />
<img src="http://www.youp.ir/photo3/1379928191691.jpg" />
<img src="http://www.youp.ir/photo3/1379928307331.jpg" />
<img src="http://www.youp.ir/photo3/1379928307372.jpg" />
</div>

<div id="thumbs">
<img src="http://www.youp.ir/photo3/thumbs/1379928533921.jpg" />
<img src="http://www.youp.ir/photo3/thumbs/1379928533962.jpg" />
<img src="http://www.youp.ir/photo3/thumbs/1379928534393.jpg" />
<img src="http://www.youp.ir/photo3/thumbs/1379928534434.jpg" />
<img src="http://www.youp.ir/photo3/1379928602491.jpg" />
<img src="http://www.youp.ir/photo3/1379928602622.jpg" />
</div>

<a href="#" id="next"></a>
</div>

وقتی به نتیجه رسیدین فایلها رو در سایت خودتون آپلود کنید .

با همین فایلها من این آدرس رو ساختم :

http://andishe118.ir/slider/

لینک به ارسال

کد ها رو میزارم تو هدر ولی بازم اسلایدر نامرتب میاره !!! یعنی انگار استایلش رو نمیاره !

لینک به ارسال

کد ها رو میزارم تو هدر ولی بازم اسلایدر نامرتب میاره !!! یعنی انگار استایلش رو نمیاره !

محتویات :


http://www.youp.ir/dl9/1379929196571.css

رو در شیوه نامه کپی کنید ببینید مشکل حل میشه ؟

لینک به ارسال

به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...