گالری عکس ....

[si6arp]

با سلام خدمت دوستان و اساتید
داشتم وبگردی میکردم . به یک گالری عکس برخورد کردم که خیلی نظر من رو جلب کرد.
گالری در این سایت : http://www.bazicenter.net/
کسی میدونه این رو چطوری درست کردن ؟ (داینامک هم باشه)

ممنون میشم که من رو راهنمایی کنید. (یک پروژه طراحی وب دارم که ادمین از من همچین چیزی میخواد . اگر امکان داره کمی سریع جواب بیدید ممنون میشم.):افسرده:

[mohitlog]

تا جایی که من میدونم از jquery استفاده کردن

حالا این jquery چیه و کدشو چجوری میشه نوشت نمیدونم

[Vahid_moghaddam]

تو گوگل دنبال jquery image gallery بگردید. plugin های زیادی پیدا می کنید.

[si6arp]

بله فرمایش شما درسته ولی فکر نکنم بشه بصورت داینامیک درش آورد. میشه ؟ :متفکر:

[Vahid_moghaddam]

میشه. یه راهش اینه که شما یه بلوک html سمت سرور بسازی (با استفاده از اطلاعاتی که از دیتابیس می گیری) و اون رو توی یه literal نمایش بدی.

[Vahid_moghaddam]

برای پیدا کردن plugin های استفاده شده می تونید به source code صفحه مراجعه کنید. سایتی که شما لینکش رو گذاشتید از plugin زیر استفاده می کنه.

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

[hamedsabzian]

من از پلاگین های JQuery ImageGalery استفاده کردم.
یه ساختار مشخص داده یعنی تگ های اون قسمتی که قراره عکسهای شما قرار بگیره ID مشخص دارن.
نیازی به استفاده از تگ HTML سمت سرور نیست. کافی از یک Repeater استفاده کنید و اطلاعات عکساتون رو از Database بگیرید و عکساتون رو Load کنید.

[hamedsabzian]

یه نمونه:
لود کردن Script ها:


<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="JGalery/js/jquery.js"></script>
<script type="text/javascript" src="JGalery/js/jquery.lightbox-0.5.js"></script>

<link rel="stylesheet" type="text/css" href="JGalery/css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 5px;
width: 790px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 5px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 5px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>


قسمتی که عکس ها نمایش داده می شوند:


<div id="gallery">
<ul>
<asp:Repeater runat="server" ID="RI" DataSourceID="DSImageGalery">
<ItemTemplate>
<li>
<a href='<%# String.Format("MakeThumbnail.aspx?size=-1&file={0}",DataBinder.Eval(Container.DataItem,"ImageUrl")) %>'
title='<%# Eval("ImageName") %>'>
<img src='<%# String.Format("MakeThumbnail.aspx?size=120&file={0}",DataBinder.Eval(Container.DataItem,"ImageUrl")) %>' alt="" />
</a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>

[si6arp]

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

[si6arp]

یک مقدار جوابت پیچیدست . یکم واضح تر

[hamedsabzian]

یک کنترل کار با داده مثل بقیه با قابلیت Bind شدن به انواع DataSource ها.
شبیه GridView با جزییات کمتر، با این تفاوت که بر خلاف GridView به منظور نمایش داده ها به صورت پیش فرض هیچ کاری نمی کنه و خودتون می تونید هر کد ASP یا HTML ای رو توی ItemTemplate ش برای نمایش داده ها بنویسید. از این لحاظ انعطاف پذیرتره!
http://www.beansoftware.com/ASP.NET-Tutorials/Repeater-Control.aspx
http://www.asp101.com/articles/john/repeater/default.asp
http://msdn.microsoft.com/en-us/magazine/cc163780.aspx

[si6arp]

مرسی از راهنمایی مفیدتون.
حالا یه سوال دیگه :
من چطوری میتونم سایز عکس رو تغییر بدم. ( برای Thumbnail ) در کسی که شما داده بودین دیدم که برای نمایش کوچک عکس از این کد استفاده نموده اید »



MakeThumbnail.aspx?size=-1&file={0}


میشه راهنمایی فرمایید ؟

[hamedsabzian]

هر چند ربطی به موضوع اصلی نداره!
یک صفحه که آدرس عکس و اندازه اون رو می گیره، عکس رو سمت سرور باز می کنه، اندازه ش رو واقعا تغییر میده و یک عکس جدید می سازه. حالا اون رو سمت سرور می فرسته. که بهینه تره.
این Page کد ASP خاصی نداره!
البته می شد به جای یک Page از یک Handler استفاده کرد، به هر حال:
کد ASP:


<%@ Page language="c#" Inherits="Thumbnail.MakeThumbnail" CodeFile="MakeThumbnail.aspx.cs" %>


کد C#:


using System;
using System.IO;

namespace Thumbnail
{
/// <summary>
/// Creates a thumbnail image from a file spec in the calling URL.
/// </summary>
public partial class MakeThumbnail : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
string file = "";
int size;
int.TryParse(Request.QueryString["size"],out size);
size = (size == 0) ? 100 : size;
try
{
// get the file name -- fall800.jpg
file = Request.QueryString["file"];

if (size == -1)
{
Response.ContentType = "image/jpeg";
Response.WriteFile(file);
}
else
{
// create an image object, using the filename we just retrieved
System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(file) );
WriteImage(size, image);

}
}
catch
{
System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath("~/GeneralImages/NoPic.jpg"));
WriteImage(size, image);
}
}
private void WriteImage(int size , System.Drawing.Image image)
{
// create the actual thumbnail image
System.Drawing.Image thumbnailImage = image.GetThumbnailImage(size, size, new System.Drawing.Image.GetThumbnailImageAbort(Thumbn ailCallback), IntPtr.Zero);

// make a memory stream to work with the image bytes
MemoryStream imageStream = new MemoryStream();

// put the image into the memory stream
thumbnailImage.Save(imageStream, System.Drawing.Imaging.ImageFormat.Jpeg);

// make byte array the same size as the image
byte[] imageContent = new Byte[imageStream.Length];

// rewind the memory stream
imageStream.Position = 0;

// load the byte array with the image
imageStream.Read(imageContent, 0, (int)imageStream.Length);

// return byte array to caller with image type
Response.ContentType = "image/jpeg";
Response.BinaryWrite(imageContent);
image.Dispose();
thumbnailImage.Dispose();
imageStream.Dispose();
}

/// <summary>
/// Required, but not used
/// </summary>
/// <returns>true</returns>
public bool ThumbnailCallback()
{
return true;
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
}
#endregion
}
}

[si6arp]

دوستان من یه چیزی درست کردم. لطفا" یه نگاه بندازید اگر ایرادی داره زحمتی بکشید و یه دست و رویی بهش بکشید. ممنون
1- دیتا بیس در پوشه DataBase هست . (اتچ کنید -Attach ) تا دیتا بیس بارگزاری شود
2- داخل فایل Web.Config دنبال کلید CnnStr بگردید و مقدار آن را به سرور و دیتابیس خود تنظیم نمایید.

ممنون اساتید.

**هر کاری کردم آپلود نشد تو سایت شرمنده
آدرس دانلود : http://www.mihandoc.com/dl/SlideImageGallery_Si6ArP.rar
پسورد فایل :
mihandoc.com