Himalaya
جمعه 24 تیر 1390, 16:55 عصر
سلام
تو این تاپیک میخوام طرز تهیه یک گالری عکس داینامیک رو توسط JQuery توضیح بدم
این توضیحات 2 بخش داره (البته 3 بخش هستش که بخش سوم رو بعدا اضافه میکنم)
ساخت یه گالری عکس توسط Visual Light Box (شما هز هر گالری که میخواید میتونید استفاده کنید) وقرار دادن خروجی اون (فایلهای پابلیش شده) مثل تصاویر و استایلها و ... تو پروژه ای توی vs
تو قسمت قبل که کار خاصی توسط ما انجام نمیشه. تو مرحله 2 میخوایم آیتمها رو از حالت ثابت خارج کنیم و اونها رو از یه فایل Xml یا یه بانک اطلاعاتی بخونیم. من اینجا از Xml استفاده میکنم که تو اجراش مشکلی نباشه.
نرم افزار گفته شده رو از اینجا دانلود (http://www.visuallightbox.com/)کنید
واسه قسمت 1 بعد از اجرای نرم افزار، از طریق آیکن + (یا درگ کردن تصاویر) عکسهای خودمون رو وارد نرم افزار میکنیم
بعد از این کار ار قسمت پراپرتی (آیکن چرخ دنده) وارد قسمت تنطیمات میشیم و تنظیمات مربوط به گالری عکس رو انجام میدیم (مثل انتخاب Theme برای تصاویر thumb و تصاویر اصلی، رنگ لایه ای که قراره رو صفحه کشیده بشه، نوع افکت برای نمایش تصویر بعدی و ...)
فرض کنید پروژه رو بعد از انجام تنظیمات، پابلیش کردیم. خروجی شامل موارد زیر هستش
یه فایل index.htm که گالری عکس تو اون نمایش داده میشه
یه پوشه data که حاوی 2 پوشه image (تصاویر اصلی) و thumbnails (تصاویر کوچیک) هستش
یه پوشه دیگه به اسم engine که فایلهای css,js و تصاویر مربوط به تم گالری تو اون قرار گرفتن
دوباره فرض کنید که گالری عکس ما میخواد مثلا مثل تصویر زیر باشه (این چیزیه که نرم افزار، بر اساس تنظیمات انتخابی ما، خودش ایجاد میکنه و من اینجا قصد درست کردن یه صفحه خوشجیل موشجیلو ندارم. پس از خالی بودن صفحه جا نخورید)
که با کلیک روی هر آیتم (مثلا اولی) تصویر زیر رو خواهیم داشت
یه پروژه web app تو vs ایجاد میکنیم تا این گالری ایجاد شده توسط ترم افزار رو واردش کنیم
فایلهای پابلیش شده (به جز ico.) رو درگ کنید رو اسم پروژه تا همه اونها به پروژه اضافه بشن
میخوایم این گالری رو تو صفحه default.aspx نمایش بدیم. فایل index.htm رو باز کنید و از بخش head قسمتی زیر رو کپی و توی قسمت head صفحه دیفالت Paste کنید
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style type="text/css">
#vlightbox a#vlb
{
display: none;
}
</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script
البته میتونید اون تگ style رو هم به فایل vlightbox.css اضافه کنید و اون بخش رو از head حذف کنید تا بخش هد یه کم تمیزتر بشه. یعنی شکل نهایی بخش head بشه این شکلی
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
از بخش Body فایل index هم تگ
<div id="vlightbox">
</div>
رو به همراه تمام محتویات داخلش، تو تگ form صفحه default قرار بدید، ولی بخش زیر رو از اون حذف کنید
a id="vlb" href="http://visuallightbox.com">Web
Photo Display by VisualLightBox.com v3.1</a>
خصوصیت bgcolor مربوط به body رو هم تو صفحه default ست کنید
الان اگه صفحه default رو اجرا کنید باید گالری عکس نمایش داده بشه.
قالب کلی این گالری تو بخش body به صورت زیر هستش
<div id="vlightbox">
<a class="vlightbox" href="data/images/01.jpg" title="">
<img src="data/thumbnails/01.jpg" alt="" />
</a>
</div>
پس واسه ساخت آیتمهای این گالری به صورت داینامیک، کافیه قسمت head رو به همون صورت که گفته شد، ست کنیم و بخشی که بین تگ div بالا گفته شد رو به ازای هر عکس تکرار کنیم (مثلا به ازای فایلهایی که تو پوشه thumbnails قرار دارن، یا به ازای هر آیتم تو فایل Xml یا به ازای هر رکورد تو جدول مورد نظر تو دیتابیس)
اما واسه بخش 2 (دریافت آیتمها از فایل xml)
اول یه فایل xml با اسم مثلا ImageGalleryItems ایجاد میکنیم (من اینجا خصوصیت alt و title رو هم با اسم عکس ست میکنم. شما میتونید به فایل xml زیر attribute هایی مثلا با اسم alt و title اضافه کنید و مقدار اونها رو برای هر تصویر ست کنید)
قالب فایل xml ما به این صورته
<images>
<image name="01.jpg" />
<image name="02.jpg" />
</images>و هر چندتا عکس که داریم تو این لیست قرار میدیم و هر چی آیتم بین تگ
<div id="vlightbox">
قرار داره رو پاک میکنیم و به جای اونها یک Literal قرار میدیم. یعنی این تگ تو بخش body باید به صورت زیر باشه
<div id="vlightbox">
<asp:Literal ID="LiteralGallery" runat="server"></asp:Literal>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
</div>
بعد یه کلاس ایجاد میکنیم تا آیتمهای فایل xml رو بخونه و یا دستکاری کنه(برای کم و زیاد کردن آیتمها) اینجا فقط خوندنش رو میگم. تابع ReadItems اسم تصاویر رو از فایل xml میخونه و نتیجه رو به صورت یک لیست که اعضای اون از نوع استرینگ هستن برمیگردونه
این کلاس به صورت زیر هستش (فرض اینه که فایل xml رو کنار فایل default (توی روت) ایجاد کردید
using System.Collections.Generic;
using System.Web;
using System.Xml.Linq;
namespace TestGallery
{
public class ImageGallery
{
private XDocument xmlDoc;
public ImageGallery()
{
xmlDoc = XDocument.Load(HttpContext.Current.Server.MapPath("~/ImageGalleryItems.xml"));
}
public List<string> ReadItems()
{
List<string> result = new List<string>();
foreach (XElement img in xmlDoc.Element("images").Elements("image"))
{
result.Add(img.Attribute("name").Value);
}
return result;
}
}
}
و در آخر برای اینکه تگهای مورد نظر رو توسط مقدار برگشتی تابع ReadItems ایجاد کنیم، تو Page_Load صفحه Default کدهای زیر رو قرار میدیم
using System;
using System.Text;
using System.Web.UI;
namespace TestGallery
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LiteralGallery.Text = string.Empty;
StringBuilder createGallery = new StringBuilder();
ImageGallery gallery = new ImageGallery();
foreach (string item in gallery.ReadItems())
{
createGallery.Append("<a class=\"vlightbox\" href=\"data/images/" + item + "\" title=\"" + item + "\"> \r\n");
createGallery.Append("<img src=\"data/thumbnails/" + item + "\" alt=\"" + item + "\" />");
createGallery.Append("</a>");
}
if (!string.IsNullOrEmpty(createGallery.ToString()))
LiteralGallery.Text = createGallery.ToString();
}
}
}
}
آموزش ساخت سرور کنترل، براساس همین چیزهایی که گفته شد رو اگه وقت کردم تو 2،3 روز آینده به ادامه همین مطلب اضافه میکنم
تو این تاپیک میخوام طرز تهیه یک گالری عکس داینامیک رو توسط JQuery توضیح بدم
این توضیحات 2 بخش داره (البته 3 بخش هستش که بخش سوم رو بعدا اضافه میکنم)
ساخت یه گالری عکس توسط Visual Light Box (شما هز هر گالری که میخواید میتونید استفاده کنید) وقرار دادن خروجی اون (فایلهای پابلیش شده) مثل تصاویر و استایلها و ... تو پروژه ای توی vs
تو قسمت قبل که کار خاصی توسط ما انجام نمیشه. تو مرحله 2 میخوایم آیتمها رو از حالت ثابت خارج کنیم و اونها رو از یه فایل Xml یا یه بانک اطلاعاتی بخونیم. من اینجا از Xml استفاده میکنم که تو اجراش مشکلی نباشه.
نرم افزار گفته شده رو از اینجا دانلود (http://www.visuallightbox.com/)کنید
واسه قسمت 1 بعد از اجرای نرم افزار، از طریق آیکن + (یا درگ کردن تصاویر) عکسهای خودمون رو وارد نرم افزار میکنیم
بعد از این کار ار قسمت پراپرتی (آیکن چرخ دنده) وارد قسمت تنطیمات میشیم و تنظیمات مربوط به گالری عکس رو انجام میدیم (مثل انتخاب Theme برای تصاویر thumb و تصاویر اصلی، رنگ لایه ای که قراره رو صفحه کشیده بشه، نوع افکت برای نمایش تصویر بعدی و ...)
فرض کنید پروژه رو بعد از انجام تنظیمات، پابلیش کردیم. خروجی شامل موارد زیر هستش
یه فایل index.htm که گالری عکس تو اون نمایش داده میشه
یه پوشه data که حاوی 2 پوشه image (تصاویر اصلی) و thumbnails (تصاویر کوچیک) هستش
یه پوشه دیگه به اسم engine که فایلهای css,js و تصاویر مربوط به تم گالری تو اون قرار گرفتن
دوباره فرض کنید که گالری عکس ما میخواد مثلا مثل تصویر زیر باشه (این چیزیه که نرم افزار، بر اساس تنظیمات انتخابی ما، خودش ایجاد میکنه و من اینجا قصد درست کردن یه صفحه خوشجیل موشجیلو ندارم. پس از خالی بودن صفحه جا نخورید)
که با کلیک روی هر آیتم (مثلا اولی) تصویر زیر رو خواهیم داشت
یه پروژه web app تو vs ایجاد میکنیم تا این گالری ایجاد شده توسط ترم افزار رو واردش کنیم
فایلهای پابلیش شده (به جز ico.) رو درگ کنید رو اسم پروژه تا همه اونها به پروژه اضافه بشن
میخوایم این گالری رو تو صفحه default.aspx نمایش بدیم. فایل index.htm رو باز کنید و از بخش head قسمتی زیر رو کپی و توی قسمت head صفحه دیفالت Paste کنید
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style type="text/css">
#vlightbox a#vlb
{
display: none;
}
</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script
البته میتونید اون تگ style رو هم به فایل vlightbox.css اضافه کنید و اون بخش رو از head حذف کنید تا بخش هد یه کم تمیزتر بشه. یعنی شکل نهایی بخش head بشه این شکلی
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
از بخش Body فایل index هم تگ
<div id="vlightbox">
</div>
رو به همراه تمام محتویات داخلش، تو تگ form صفحه default قرار بدید، ولی بخش زیر رو از اون حذف کنید
a id="vlb" href="http://visuallightbox.com">Web
Photo Display by VisualLightBox.com v3.1</a>
خصوصیت bgcolor مربوط به body رو هم تو صفحه default ست کنید
الان اگه صفحه default رو اجرا کنید باید گالری عکس نمایش داده بشه.
قالب کلی این گالری تو بخش body به صورت زیر هستش
<div id="vlightbox">
<a class="vlightbox" href="data/images/01.jpg" title="">
<img src="data/thumbnails/01.jpg" alt="" />
</a>
</div>
پس واسه ساخت آیتمهای این گالری به صورت داینامیک، کافیه قسمت head رو به همون صورت که گفته شد، ست کنیم و بخشی که بین تگ div بالا گفته شد رو به ازای هر عکس تکرار کنیم (مثلا به ازای فایلهایی که تو پوشه thumbnails قرار دارن، یا به ازای هر آیتم تو فایل Xml یا به ازای هر رکورد تو جدول مورد نظر تو دیتابیس)
اما واسه بخش 2 (دریافت آیتمها از فایل xml)
اول یه فایل xml با اسم مثلا ImageGalleryItems ایجاد میکنیم (من اینجا خصوصیت alt و title رو هم با اسم عکس ست میکنم. شما میتونید به فایل xml زیر attribute هایی مثلا با اسم alt و title اضافه کنید و مقدار اونها رو برای هر تصویر ست کنید)
قالب فایل xml ما به این صورته
<images>
<image name="01.jpg" />
<image name="02.jpg" />
</images>و هر چندتا عکس که داریم تو این لیست قرار میدیم و هر چی آیتم بین تگ
<div id="vlightbox">
قرار داره رو پاک میکنیم و به جای اونها یک Literal قرار میدیم. یعنی این تگ تو بخش body باید به صورت زیر باشه
<div id="vlightbox">
<asp:Literal ID="LiteralGallery" runat="server"></asp:Literal>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
</div>
بعد یه کلاس ایجاد میکنیم تا آیتمهای فایل xml رو بخونه و یا دستکاری کنه(برای کم و زیاد کردن آیتمها) اینجا فقط خوندنش رو میگم. تابع ReadItems اسم تصاویر رو از فایل xml میخونه و نتیجه رو به صورت یک لیست که اعضای اون از نوع استرینگ هستن برمیگردونه
این کلاس به صورت زیر هستش (فرض اینه که فایل xml رو کنار فایل default (توی روت) ایجاد کردید
using System.Collections.Generic;
using System.Web;
using System.Xml.Linq;
namespace TestGallery
{
public class ImageGallery
{
private XDocument xmlDoc;
public ImageGallery()
{
xmlDoc = XDocument.Load(HttpContext.Current.Server.MapPath("~/ImageGalleryItems.xml"));
}
public List<string> ReadItems()
{
List<string> result = new List<string>();
foreach (XElement img in xmlDoc.Element("images").Elements("image"))
{
result.Add(img.Attribute("name").Value);
}
return result;
}
}
}
و در آخر برای اینکه تگهای مورد نظر رو توسط مقدار برگشتی تابع ReadItems ایجاد کنیم، تو Page_Load صفحه Default کدهای زیر رو قرار میدیم
using System;
using System.Text;
using System.Web.UI;
namespace TestGallery
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LiteralGallery.Text = string.Empty;
StringBuilder createGallery = new StringBuilder();
ImageGallery gallery = new ImageGallery();
foreach (string item in gallery.ReadItems())
{
createGallery.Append("<a class=\"vlightbox\" href=\"data/images/" + item + "\" title=\"" + item + "\"> \r\n");
createGallery.Append("<img src=\"data/thumbnails/" + item + "\" alt=\"" + item + "\" />");
createGallery.Append("</a>");
}
if (!string.IsNullOrEmpty(createGallery.ToString()))
LiteralGallery.Text = createGallery.ToString();
}
}
}
}
آموزش ساخت سرور کنترل، براساس همین چیزهایی که گفته شد رو اگه وقت کردم تو 2،3 روز آینده به ادامه همین مطلب اضافه میکنم