سوال: مشکل در پیاده سازی Slider با واکشی آدرس عکس از دیتابیس (JQuery Slider With Database) [بایگانی]

mrmohsen

شنبه 27 آذر 1389, 13:48 عصر

با سلام خدمت تمام دوستان و عزیزان
بنده میخوام یه Slider درست کنم که از دیتابیس URL عکس بگیره اسکریپتو چه جوری تغییر بدم که این کار انجام بشه:

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

var imgs = ['images/n1.jpg','images/ n2.jpg','images/ n3.jpg'];
var cnt = imgs.length;

$(function() {
setInterval(Slider, 3000);
});

function Slider() {
$('#imageSlide').fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
});
}
</script>
</head>
<body>
<img id="imageSlide" alt="" src="" />
</body>
</html>

در واقع این یه خطو چه جوری قرار بدم که آدرس از دیتابیس بگیره

Var imgs = ['images/n1.jpg','images/ n2.jpg','images/ n3.jpg'];
دوستان اگه راهنمایی کنن ممون میشم
اگه نمونه یا سایتی و لینکی که در مورد دیتابیس و اسلایدر بود که بتونم کمک بگیرم داشتید لطف کنید ممنون میشم.

maryam_272

شنبه 27 آذر 1389, 14:04 عصر

من اینجوری کار کردم
Var imgs =<%=ArrayeImage%>;

که این ArrayeImage را در کدبیهاند به این صورت تعریف می کنی
Public ArrayeImage As String
وتوی برنامه به اون مقدار میدی از طریق خوندن از دیتابیس

mrmohsen

شنبه 27 آذر 1389, 16:39 عصر

من اینجوری کار کردم
Var imgs =<%=ArrayeImage%>;

که این ArrayeImage را در کدبیهاند به این صورت تعریف می کنی
Public ArrayeImage As String
وتوی برنامه به اون مقدار میدی از طریق خوندن از دیتابیس
با تشکر از دوست عزیزم
اگه دوستان نظرات و روشهایی دیگری دارند لطف کنند ممنون میشم
با تشکر از تمامی دوستان و عزیزان وزحمتکشان این سایت

mrmohsen

شنبه 27 آذر 1389, 18:19 عصر

با سلام مجدد خدمت دوستان
من این کد رو امتحان کردم کار میکنه ولی تصویری نشون نمیده هرکاری کردم حال بدون تصویره مثل حالتی که اصلا عکسی نیست من حتی کنترل Image هم از نوع Html به کنترل ASP تبدیل کردم ولی بازهم نشد اگه راهنمایی کنید ممنون میشم؟ سورس رو یه بار دیگه هم میذارم:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imgs = '<%= ArrayeImage %>';
var cnt = imgs.length;
$(function() {
setInterval(Slider, 3000);
});
function Slider() {
$('#imageSlide').fadeOut("slow", function() {$(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow"); });
}
</script>
<style type="text/css">
#imageSlide
{
height: 259px;
width: 679px;
text-align: center;
}
</style>
</head>
<body>
<img ID="imageSlide" alt="" src="" Height="173px" Width="959px" />
<%-- <asp:Image ID="imageSlide" runat="server" Height="173px"
Width="959px" />--%>

</body>

این هم Code Behind

public string ArrayeImage;
protected void Page_Load(object sender, EventArgs e)
{
SqlConnectioncon=newSqlConnection(@"DataSource=MOHSEN \SQLEXPRESS;Initial Catalog=JQuery;Integrated Security=true");
string sql = "select * from Pic";
DataTable dt = new DataTable();
SqlCommand com = new SqlCommand(sql,con);
SqlDataReader dr ;
con.Open();
dr = com.ExecuteReader ();
while (dr.Read())
{
ArrayeImage =dr["PicUrl"].ToString();
}
con.Close();

}

maryam_272

یک شنبه 28 آذر 1389, 09:46 صبح

دوست عزیز اگه دقت کرده باشید نمونه اولیه که شما گذاشته بودید به این شکل هست:
Var imgs = ['images/n1.jpg','images/ n2.jpg','images/ n3.jpg'];

بنابراین وقتی این خط برنامه رو نوشتید
var imgs = '<%= ArrayeImage %>';
ArrayeImage شما باید فرمت آن به این شکل باشد ['images/n1.jpg','images/ n2.jpg','images/ n3.jpg']
اون چیزی که به ذهن من رسید این بود حالا امتحان کنید اگر درست نشد بگید.

Saber_Fatholahi

پنج شنبه 16 دی 1389, 08:55 صبح

سلام فدات شم یه راه راحت ترم اینه که بیای کد هاتو طرف سرور بنویسی، حتی جاوا اسکریپت بعد اونو بذاری توی یه Litral به همین سادگی
موفق باشی

b.paseban

پنج شنبه 16 دی 1389, 13:57 عصر

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

Himalaya

دوشنبه 20 دی 1389, 00:17 صبح

عکسها تو پوشه Pic و این پوشه هم تو Root سایت
اسم عکسها همراه پسوند تو دیتابیس

<script type="text/javascript">
var ReadVar = '<%= ArrayeImage %>';
var imgs = new Array();
imgs = ReadVar.split(':');
var num = 1;
$(document).ready(function () {
setInterval(Slider, 3000);
});

function Slider() {
$('#imageSlide').fadeOut("slow", function () { $(this).attr('src', 'Pic/' + imgs[num++ % imgs.length]).fadeIn("slow"); });
}
</script>

<div>
<img id="imageSlide" alt="" src="Pic/01.jpg" />
</div>

public string ArrayeImage;
SqlConnection con = new SqlConnection(@"Data Source=amir-pc;Initial Catalog=JQuery;Integrated Security=true");
protected void Page_Load(object sender, EventArgs e)
{
ArrayeImage = string.Empty;
SqlDataReader dr = null;
if (con.State == ConnectionState.Closed)
con.Open();
try
{
dr = (new SqlCommand("select * from Pic", con)).ExecuteReader();
while (dr.Read())
{
ArrayeImage += dr["PicUrl"].ToString() + ":";
}
}
finally
{
if (dr != null)
dr.Close();
con.Close();
}
if (!string.IsNullOrEmpty(ArrayeImage))
ArrayeImage = ArrayeImage.Substring(0, ArrayeImage.Length - 1);
}