اسلایدر خبر (نمایش خبر ها با جی کوئری)

[moslem.hady]

سلام دوستان. چندوقته میبینم خیلی ها دنبال اسلایدر خبر هستن و خودشون هم نمیدونن چیه. معمولا آدرس یه سایت رو میدن و میگن: "متن متحرک مثل این سایت میخوام"!!


http://www.niazjoo.ir/hady/newsslider.jpg


توی این پست از یه اسلایدر خبر رایگان استفاده میکنیم.

دموی این اسلایدر خبر (http://programmer.persianblog.ir/post/43/%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%D8%B1%20%D8%A E%D8%A8%D8%B1) رو میتونید از این آدرس (http://www.htmldrive.net/items/demo/397/Vertical-Scrolling-News-Ticker-With-jQuery-jCarouse) ببینید. اما میخوام کد این رو طوری عوض کنیم که در آن واحد یه خبر نشون بده.
اول از همه فایل های این اسلاید رو از اینجا (http://www.htmldrive.net/items/download/397) دانلود کنید. و در پروژتون قرار بدین.
حالا css ها و js ها رو به صفحه مورد نظرتون بکشید. یه همچین چیزی میشه:


<script src="newsslider/jcarousellite_1.0.1.pack.js" type="text/javascript"></script>
<script src="newsslider/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<link href="newsslider/style.css" rel="stylesheet" type="text/css" />


خوب حالا این script رو توی هد بنویسید:

<script type="text/javascript">
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible: 1,
auto:2000,
speed:1000
});
});
</script>

حالا این DIV رو اضافه کنید:

<div class="newsticker-jcarousellite">
<ul>
<li>
<div class="info">برای در خواست نمایندگی فروش <a href="#">اینجا</a> کلیک کنید.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="info">
<a href="#">خبر: شرکت **** اولین تولید کننده آب معدنی لیوانی</a>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="info">
<a href="#">آب معمولی در بطری های آب معدنی</a>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="info">
<a href="#">تخفیف 20%!</a>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>

تموم شد. دیگه بقیش یا خودتونه!

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

دانلود اسلایدر خبر (http://niazjoo.ir/hady/newsslider.rar)
منبع:
اسلایدر خبر (http://programmer.persianblog.ir/post/43)

[fakhravari]

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

[khengool]

لطفا ارتباط با دیتا بیس رو هم بگذارید

[b.paseban]

اتصال به دیتابیس زیاد مشکل نیست.

<div class="newsticker-jcarousellite">
<ul>
<li>
<div class="info">برای در خواست نمایندگی فروش <a href="#">اینجا</a> کلیک کنید.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="info">
<a href="#">خبر: شرکت **** اولین تولید کننده آب معدنی لیوانی</a>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="info">
<a href="#">آب معمولی در بطری های آب معدنی</a>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="info">
<a href="#">تخفیف 20%!</a>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>
اگر به تکه کد بالا نگاه کنید متوجه خواهید شد که تکه کدهای زیر در حال تکرار هستند:


<li>
<div class="info">برای در خواست نمایندگی فروش <a href="#">اینجا</a> کلیک کنید.
</div>
<div class="clear">
</div>
</li>

پس ما میتونیم با استفاده از یه کنترل نمایش دیتا بعنوان مثال DataRepeater این تکه کدها رو درست کنیم به این صورت که تکه کد زیر که فقط در بالای این کدها قرار گرفته و تکرار نشده در HeaderTemplate قرار داد:


<div class="newsticker-jcarousellite">
<ul>

بسته شده این تگ ها نیز در FooterTemplate قرار میگیرد.


</ul>
</div>

فقط میمونه تکه کدهای تکرار شونده که در ItemTemplate قرار میدیم و قسمت های مختلف رو به دیتا بیس وصل میکنیم.(با استفاده از sqldatasource)

[fakhravari]

با سلام
نگ li باید در یک ربپیتر باید گراشت

[davood59]

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

[moslem.hady]

سلام به همه. همونطور که دوست عزیزمون b.paseban (http://barnamenevis.org/member.php?122455-b.paseban) فرمودن، تگ تکرار شونده در این slider تگ li و محتویات داخلش هست. ینی کافیه شما این قسمت رو توی یه ریپیتر بندازین تا خودش براتون این رو تکرار کنه.
من یه مثال به همین اسلایدر زدم ولی یکم با این که اول پست گفتم فرق داره. تفاوتش اینه که عکس رو هم کناره عنوان میاره. این کار رو برای دوستانی کردم که میخوان عکس هم کنار عنوان خبر بیاد.
خوب. اول یه ریپیتر میذاریم و قسمت غیر تکرار شونده رو توی هد و توی فوتر اون مینویسیم. ینی اینجوری:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<div class="newsticker-jcarousellite">
<ul>
</HeaderTemplate>
<FooterTemplate>
</ul> </div>
</FooterTemplate>
</asp:Repeater>خوب؟!!
حالا قسمت تکرارشونده رو توی ItemTemplate مینویسیم!
ینی این:

<ItemTemplate>
<li>
<div class="thumbnail">
<img src="images/1.jpg">
</div>
<div class="info">
<a href="http://www.vladstudio.com/wallpaper/?knight_lady">The Knight and the Lady</a>
<span class="cat">Category: Illustrations</span>
</div>
<div class="clear">
</div>
</li>
</ItemTemplate>حالا برای اینکه از دیتابیس بخونه باید یه سری چیزا رو تغییر بدیم و با Eval کار کنیم. در نهایت میشه این:

<ItemTemplate>
<li>
<div class="thumbnail">
<img alt='<%# Eval("Title") %>' src='<%# Eval("Pic","images/{0}") %>'>
</div>
<div class="info">
<a href='<%# Eval("ID","news.aspx?id={0}") %>' title='<%# Eval("Title") %>'>
<%# Eval("Title") %></a> <span class="cat">
<%# SubStringHtml(Eval("newstext"),0,140)%></span>
</div>
<div class="clear">
</div>
</li>
</ItemTemplate>
من از تابع SubStringHtml برای نمایش خلاصه خبر استفاده کردم. که نیازی به توضیح نیست. عکس ها هم در پوشه images ذخیره شدن و فقط اسم عکس در دیتابیس برای هر خبر ذخیره میشه.
و بعدش ریپیتر رو بایه SqlDataSource به دیتابیس وصل میکنیم.:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [news]"></asp:SqlDataSource>در کل ریپیتر ما این میشه:


<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<div class="newsticker-jcarousellite">
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<div class="thumbnail">
<img alt='<%# Eval("Title") %>' src='<%# Eval("Pic","images/{0}") %>'>
</div>
<div class="info">
<a href='<%# Eval("ID","news.aspx?id={0}") %>' title='<%# Eval("Title") %>'>
<%# Eval("Title") %></a> <span class="cat">
<%# SubStringHtml(Eval("newstext"),0,140)%></span>
</div>
<div class="clear">
</div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul> </div>
</FooterTemplate>
</asp:Repeater
فایل ضمیمه رو میتونید برای راهنمایی بیشتر ببینید:

[shahrzad87]

سلام
از آموزش ممنون،
چطور میشه گزینه های "قبلی" ، "بعدی" و "نمایش اتوماتیک" هم به اسلایدشو اضافه کرد؟