PDA

View Full Version : پویا سازی اسلایدشو TPNice Slideshow



sajad_boj70
سه شنبه 28 شهریور 1391, 22:26 عصر
سلام دوستان.
من تو سایتم از اسلایدشوی TPNice Slideshow استفاده کردم.که براتون ضمیمش کردم.
هر کاری کردم نتونستم پویاش کنم که اطلاعاتش رو از بانک بگیره.
دوستان کسی میتونه راهنمایی کنه.؟93059

hamed_hossani
سه شنبه 28 شهریور 1391, 23:49 عصر
من موفق نشدم فایل شما را اجرا کنم!
ولی قبلا یک اسلاید شو خبر داشتم که به صورت زیر بوده
ابتدا

<script src="images/news-ticker/jquery-latest.pack.js" type="text/javascript"></script>
<script src="images/news-ticker/jcarousellite_1.0.1c4.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible: 3,
auto:1000,
speed:2000
});
});

</script>

را در بین تگ head قرار داده و در ادامه

من برای داینامیک کردن از یک dataList استفاده کردم
که


<asp:DataList ID="DataList1" runat="server" DataKeyField="id" DataSourceID="SqlDataSourceNews"
Width="100%" TabIndex="2">

<ItemTemplate>
<!--% News news = new News();
news = news.Read(3);
%-->
<li>
<table cellpadding="2" cellspacing="1" dir="rtl" style="width: 100%; vertical-align: top;
text-align: right">
<tr>
<td style="text-align: right; font-family: tahoma; color: #800000; font-weight: bold;">
<div class="info" dir="rtl">
<a href="./main/views.aspx?idNews=<%# Eval("id") %>" style="text-decoration: none;
color: #800000;">
<asp:Label ID="titleLabel" runat="server" Text='<%# Eval("title") %>' ToolTip='<%# SubString(Eval("contentNews"),200) %>' />
</a>
<br />
<span style="color: #000000; font-weight: normal" s>&nbsp; [
<asp:Label ID="Label4" runat="server" Text='<%# Eval("dateNews") %>' />
&nbsp;| &nbsp;
<asp:Label ID="Label5" runat="server" Text='<%# Eval("timeNews") %>' />
] </span>
</div>
<div class="clear">
</div>
</td>
</tr>
</table>
</li>
</ItemTemplate>
</asp:DataList>
که در قسمت ItemTemplate رکورد ها را با تگ li ایجاد می کنیم!
news-ticker (http://www.htmldrive.net/items/show/397/Vertical-Scrolling-News-Ticker-With-jQuery-jCarouse)

mohsen22
چهارشنبه 29 شهریور 1391, 00:10 صبح
سلام . منم به این پروژه خیلی احتیاج دارم . اگه کسی با یه مثال ساده که بشه از بانک خبر رو به همراه عکس نمایش بده ما رو راهنمایی کنه یک عمر دعاش میکنم!

hamed_hossani
چهارشنبه 29 شهریور 1391, 00:32 صبح
پست قبلی نمایش

یه مثال ساده که بشه از بانک خبر رو به همراه عکس نمایش بدهاست
http://www.htmldrive.net/media/2010/8/19/1282202488.jpg
در news-ticker (http://www.htmldrive.net/items/show/397/Vertical-Scrolling-News-Ticker-With-jQuery-jCarouse)
در ابتدا

<div class="newsticker-jcarousellite">
<ul>
را داریم و سپس به ازای هر رکورد یک

<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>
که در div اول تگ img قرار داده میشه که از کلاس thumbnail استفاده می کنه
تگ بعدی info که شامل لینک و توضیحات خبر است
و تگ clear برای ایجاد یک جداکننده بین رکورد ها
و در پایان
</ul>
</div>بسته میشود.

hamed_hossani
چهارشنبه 29 شهریور 1391, 00:39 صبح
تنها کاری که شما باید برای داینامیک کردن انجام بدین
یک datalist یا ... به جدول خبر وصل کنید که براتون لینک+توضیحات+عکس رو بکشه بیرون و اون وقت در<ItemTemplate> مربوط به datalist

<li>
<div class="thumbnail">
<img src="images/6.jpg">
</div>
<div class="info">
<a href="http://www.vladstudio.com/wallpaper/?traveling_tree">The Traveling Tree</a>
<span class="cat">Category: Creatures</span>
</div>
<div class="clear"></div>
</li>را با توجه به فیلد بایند شده(جدول خبر)مقدار دهی کنید
همانند کدی که خودم استفاده کردم> رو گذاشتم(پست های قبلی)

ya30ien2
چهارشنبه 29 شهریور 1391, 01:04 صبح
آقای hamed_hossani (http://barnamenevis.org/member.php?133368-hamed_hossani) اگه امکان داره مثال اجرایی بزارید که ما هم بتونیم استفاده کنیم
اگه این کار رو بکنید ممنون میشیم

sajad_boj70
چهارشنبه 29 شهریور 1391, 08:48 صبح
تنها کاری که شما باید برای داینامیک کردن انجام بدین
یک datalist یا ... به جدول خبر وصل کنید که براتون لینک+توضیحات+عکس رو بکشه بیرون و اون وقت در<ItemTemplate> مربوط به datalist
را با توجه به فیلد بایند شده(جدول خبر)مقدار دهی کنید
همانند کدی که خودم استفاده کردم> رو گذاشتم(پست های قبلی)

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

sajad_boj70
چهارشنبه 29 شهریور 1391, 13:59 عصر
دوستان کسی نمیتونه راهنمایی کنه

bade saba
چهارشنبه 29 شهریور 1391, 14:44 عصر
دوست عزیز این اسلاید شو دو ساختار تکرار شونده داره که المانهاش رو ایجاد میکنه
بخش اول که وظیفه نشو دادن عکسهای اصلی رو داره ( عکسهای بزرگ ) که کدش اینه

<div class="imageElement">
<h3>
The Celebrities</h3>
<p>
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
<a href="#" title="open link" class="open"></a><img src="files/11193000.jpg" class="full" alt="The Celebrities" /></div>

و بخش دوم که منو رو میسازه که اونم کدش اینه

<div class="TPNiceSlideShowMenuContent">
<img src="files/11193001.jpg" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
<span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
</p>
</div>
این دو تا الگو در هر دو بخش هی تکرار شده و المانها رو به اسلایدشو اضافه کرده شما کافیه این المانها رو به صورت داینامیک تولید کنید

bade saba
چهارشنبه 29 شهریور 1391, 14:53 عصر
موارد که به صورت داینامیک تولید میشه باید این الگو رو داشته باشه

<div class="imageElement">
<h3>
تیتر عکس بزرگ</h3>
<p>
توضیح عکس بزرگ</p>
<a href="#" title="open link" class="open"></a><img src="آدرس عکس بزرگ" class="full" alt="The Celebrities" /></div>



<div id="TPNiceSlideShowMenu">
<div class="TPNiceSlideShowMenuContent">
<img src="آدرس عکس منو" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">تیتر منو</span><br />
<span class="tpnssmenu_desc">نوشته منو</span> </a>
</p>
</div>

sajad_boj70
چهارشنبه 29 شهریور 1391, 15:06 عصر
موارد که به صورت داینامیک تولید میشه باید این الگو رو داشته باشه

<div class="imageElement">
<h3>
تیتر عکس بزرگ</h3>
<p>
توضیح عکس بزرگ</p>
<a href="#" title="open link" class="open"></a><img src="آدرس عکس بزرگ" class="full" alt="The Celebrities" /></div>



<div id="TPNiceSlideShowMenu">
<div class="TPNiceSlideShowMenuContent">
<img src="آدرس عکس منو" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">تیتر منو</span><br />
<span class="tpnssmenu_desc">نوشته منو</span> </a>
</p>
</div>

بنده هم دقیقا این کار کردم.

<div class="TPNSSwrapper">
<div id="TPNiceSlideShow">
<div class="imageElement">
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<h3>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("title") %>'></asp:Label>
</h3>
<p>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("des") %>'></asp:Label>
</p>
<a href="#" title="open link" class="open"></a><asp:Image ID="Image1" runat="server" Height="100" ImageUrl='<%# Eval("bpic") %>'
Width="100" class="full" />
</ItemTemplate>
</asp:ListView>

</div>

</div>



<div id="TPNiceSlideShowMenuWrp">
<div id="TPNiceSlideShowMenu">
<div class="TPNiceSlideShowMenuContent">
<asp:ListView ID="ListView2" runat="server">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" Height="20" ImageUrl='<%# Eval("spic") %>'
Width="20" class="full" />
<p>

<asp:Label ID="Label3" runat="server" Text='<%# Eval("title") %>'></asp:Label>
<br />

<asp:Label ID="Label4" runat="server" Text='<%# Eval("des") %>'></asp:Label>

</p>


</ItemTemplate>
</asp:ListView>


</div>
</div>



اما نمیدونم چرا اسلایدشوم به این صورت نشون داده میشه.منوهای کوچیک سمت راست خراب میشه.
93102

bade saba
چهارشنبه 29 شهریور 1391, 16:49 عصر
<div class="imageElement">

<div class="TPNiceSlideShowMenuContent">
این دو تا دیو هم باید به ازای هر آیتم تکرار بشه اولی برای عکسهای اصلی و دومی برای منو در صورنی که شما این دو رو خارج list قرار دادید
*** اگر سورس فایل index رو نگاه کنید کاملا مشخصه

sajad_boj70
چهارشنبه 29 شهریور 1391, 22:18 عصر
<div class="imageElement">

<div class="TPNiceSlideShowMenuContent">
این دو تا دیو هم باید به ازای هر آیتم تکرار بشه اولی برای عکسهای اصلی و دومی برای منو در صورنی که شما این دو رو خارج list قرار دادید
*** اگر سورس فایل index رو نگاه کنید کاملا مشخصه
ممنون.
این کار رو هم کردم ولی جواب نداد.
دوست عزیز خیلی ممنونت میشم اگه همین اسلایدشو رو پویا کردی آپلود کنی بتونیم استفاده کنیم.

sajad_boj70
پنج شنبه 30 شهریور 1391, 09:58 صبح
ممنون.
این کار رو هم کردم ولی جواب نداد.
دوست عزیز خیلی ممنونت میشم اگه همین اسلایدشو رو پویا کردی آپلود کنی بتونیم استفاده کنیم.

دوستان لطفا راهنمایی کنید.

bade saba
پنج شنبه 30 شهریور 1391, 12:15 عصر
راهنمایی من کامل بود دوست عزیز اگر چند دقیقه وقت میگذاشتید حتما میتونستید انجام بدید.
این پروژه که ضمیمه شده همون چیزایی که گفتم رو انجام دادم و میبینید که کامل کار میکنه

sajad_boj70
پنج شنبه 30 شهریور 1391, 16:04 عصر
راهنمایی من کامل بود دوست عزیز اگر چند دقیقه وقت میگذاشتید حتما میتونستید انجام بدید.
این پروژه که ضمیمه شده همون چیزایی که گفتم رو انجام دادم و میبینید که کامل کار میکنه

ممنون.
مشکل من تو این تیکه بود:

rDataMenu.DataSource = selct1;
DataBind();


یعنی مطالب صفحه اصلی رو فراخوانی میکردم ولی منوهام رو فراخوانی نمیکردم.
البته من از بانک sql استفاده کردم.
خیلی ممنون از وقتی که گذاشتید.

mohsen22
پنج شنبه 30 شهریور 1391, 23:56 عصر
ممنون مثال کار کرد. فقط اگه بخواهیم از جداول موجود در دیتابیس بخونه چه کنیم؟ مرسی

sajad_boj70
جمعه 31 شهریور 1391, 08:53 صبح
ممنون مثال کار کرد. فقط اگه بخواهیم از جداول موجود در دیتابیس بخونه چه کنیم؟ مرسی

شبیه به همینه.
ابتدا یک Table درست میکنیم با فیلدهای زیر:

id int
bpic nvarchar(500)
spic nvarchar(500)
title nvarchar(200)
des nvarchar(300)


که اسم این Table رو مثلا میزاریم slide
خب حالا تو asp .
در مثال بالا به جای این تیکه کد :

if (!IsPostBack)
{
DataSet menuInformation = new DataSet();
menuInformation.ReadXml(MapPath("data.xml"));
rData.DataSource = menuInformation;
rData.DataBind();
rDataMenu.DataSource = menuInformation;
rDataMenu.DataBind();
}


از این کد استفاده میکنیم :

DataTable aa = new DataTable();
using (SqlConnection con = new SqlConnection(@"Data Source=SAJAD-B2F1D1646;Initial Catalog=site;Integrated Security=True"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from slide", con);
SqlDataAdapter da2 = new SqlDataAdapter(cmd);
da2.Fill(aa);
rData.DataSource = aa;
DataBind();
rDataMenu.DataSource = aa;
DataBind();
con.Close();


این قسمت رو هواست باشه با آدرس بانک خودت عوض کنی این آدرس مربوط به بانک منه:


Data Source=SAJAD-B2F1D1646;Initial Catalog=site;Integrated Security=True


و این قسمت هم مربوط به فراخوانی شه :


<div class="TPNSSwrapper">
<div id="TPNiceSlideShow">
<asp:Repeater ID="rData" runat="server">
<ItemTemplate>
<div class="imageElement">
<h3>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("title") %>'></asp:Label>
</h3>
<p>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("des") %>'></asp:Label>
</p>
<a href="#" title="open link" class="open"></a><asp:Image ID="Image1" runat="server" Height="100" ImageUrl='<%# Eval("bpic") %>'
Width="0" class="full" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>



<div id="TPNiceSlideShowMenuWrp" align="center">
<div id="TPNiceSlideShowMenu">
<asp:Repeater ID="rDataMenu" runat="server">
<ItemTemplate>
<div class="TPNiceSlideShowMenuContent" align="center">
<asp:Image ID="Image2" runat="server" Height="50" ImageUrl='<%# Eval("spic") %>'
Width="50" class="full" alt="The Celebrities" />
<p style="color: #FFFFFF">

<asp:Label ID="Label3" runat="server" Text='<%# Eval("title") %>'></asp:Label>
<br />

<asp:Label ID="Label4" runat="server" Text='<%# Eval("des") %>'></asp:Label>

</p>

</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
<div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
</div>
</div>
<div style="clear: both;">
</div>
</div>