اپل اسلایدر

شنبه ۷ اردیبهشت ۱۳۹۲ comment

۹ دیدگاه

6,181 بازدید

این بار برای شما اسلایدری قرار دادیم که در تب های آن می توانید تصویر ، متن و… قرار دهید.

آموزش استفاده

قبل از تگ </head> کد زیر را قرار دهید :

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

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

<!--[if lte IE 7]>
<style type="text/css">
ul li{
	display:inline;
	/*float:left;*/
}
</style>
<![endif]-->

<!--[if lte IE 7]>

ul li{

display:inline;

/*float:left;*/

}

</style>

<![endif]-->

بعد از تگ <body> کد زیر را قرار دهید :

<div id="main">

  <h1>Apple Slider</h1>

  <div id="gallery">

    <div id="slides">

    <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>

    </div>

    <div id="menu">

    <ul>
        <li class="fbar">&nbsp;</li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>

    </ul>

    </div>

  </div>

</div>

<h1>Apple Slider</h1>

</div>

<ul>

</ul>

</div>

توضیحات:

برای اینکه تب اضافه کنید لازم است شما در “id “slides :

<div id="slides">

    <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>

    </div>

</div>

برای مثال در داخل “div “slides کد زیر را اضافه کنید و برای لینک دادن href را مقدار دهید:

  <div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>

1	<div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>

و نیز تصویر کوچکی از تب را در “id “menu قرار دهید :

 <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>

1	<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>

شرکت طراحی وب سایت پروگ پارس

زانیار

۱۳۹۲-۰۲-۰۷

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

mahdi

۱۳۹۲-۰۲-۰۷

سلام
زانیار جان منظورت همچین منویی هست ؟
http://www.ijquery.ir/menu-navigation/%d9%85%d9%86%d9%88-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b4%d9%86%d8%a7%d9%88%d8%b1/

زانیار

۱۳۹۲-۰۲-۰۷

نه منوهایی که به صورت یه عکس کوچیک و یا به اندازه ی دل خواه که در بعضی از سایتها می بینیم که نصف عکس مخفی هستش و با رفتن بر روی عکس بقیه ی اون بیرون میاد و با کلیک بر روی عکس به صفحه ی مورد نظر هدایت می شه

mahdi

۱۳۹۲-۰۲-۰۷

فک میکنم از این میتونی استفاده کنی
http://www.ijquery.ir/menu-navigation/منو-جی-کوئری-باز-شو-ثابت/

زانیار

۱۳۹۲-۰۲-۰۷

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

mahdi

۱۳۹۲-۰۲-۰۷

بله امکانش هست که باید از img استفاده کنید با کمی ویرایش

زانیار

۱۳۹۲-۰۲-۰۷

همون ویرایشش سخته خب 😀
نمیشه یه کد مخصوص برای یه همچین منویی که در وسط صفحه قرار بگیره و به جای این مدلی از عکس استفاده شده باشه هم قرار بدید ؟