ساخت گالری تصاویر در CSS
گالری تصاویر
برای ساخت گالری تصاویر می توان از CSS استفاده کرد.
توضیحات عکس بالا، در اینجا اضافه شود
توضیحات عکس بالا، در اینجا اضافه شود
توضیحات عکس بالا، در اینجا اضافه شود
توضیحات عکس بالا، در اینجا اضافه شود
در مثال زیر، با استفاده از CSS یک گالری تصاویر ساخته شده است:
مثال (ساخت گالری تصاویر در CSS)
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="/klematis_big.htm">
<img src="/klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="/klematis2_big.htm">
<img src="/klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="/klematis3_big.htm">
<img src="/klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="/klematis4_big.htm">
<img src="/klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
خودتان امتحان کنید »<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="/klematis_big.htm">
<img src="/klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="/klematis2_big.htm">
<img src="/klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="/klematis3_big.htm">
<img src="/klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="/klematis4_big.htm">
<img src="/klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 31845
دیدگاه‌ها
salam khaste nabashin man ye moshkel daram oonam ine ke vaghti ye gallery mizanam aksam ofoghi nemishe amoodie yani rooye hamgharar migiran
سلام کدهای خودتون رو برامون ارسال کنید تا مشکل رو برطرف کنیم.
سلام
خسته نباشید
من داخل notepad یه صفحه به عنوان گالری درست کردم و توش چند تا عکس گذاشتم. و تو browser هم درست نمایش داده میشه. اما وقتی browser زوم میکنم (کوچک یا یزرگ کردن) عکسا توی صفحه جا به جا میشن. چیکار کنم که ثابت بمونن؟ ممنون میشم جواب بدید.
سلام، بله حق با شماست در مثال بالا زمانی که اندازه مرورگر را کوچک و بزرگ می کنیم، تصاویر جابه جا می شوند و در واقع زیر هم قرار می گیرند. اگر مایل نیستید که این اتفاق بیافتد و در واقع می خواهید که در هر حال، 4 تصویر مثال بالا در یک خط قرار بگیرند، باید تمام آنها را داخل یک div دیگر قرار دهید و خصوصیت min-width را برای div با یک مقدار مناسب تنظیم نمایید.
یعنی هر ردیف از عکسها رو توی یک div بذارم. مقدار مناسب برای min-width رو چطور باید تعیین کنم؟
بنظر بنده بهتر است که کل عکس ها را درون یک div قرار دهیم و خصوصیت min-width را با مقدار مثلا 600 پیکسل تنظیم کنیم. مقدار 600 بستگی به نیاز شما دارد.
با سلام
در این مثال قسمتی از کد div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}در body به چه صورت فراخوانی شده؟
با سپاس
این کلاس به عکسهایی که داخل یک DIV با کلاس img هستند، اعمال میشه. در داخل div با کلاس img، تمام عکسها این خصوصیات تعریف شده در کلاس رو می‌گیرن.
با سلام. نشکر از سایت خوبتون. حسته نباشید. ببخشید میخواستم برای سایت یه slide show درست کنم. در واقع یک اسلاید شو داره اما میخوام براش دکمه بذارم که قابلیت عوش شدن تصویر با صورت دستی(توسط کاربر) باشه. نمیدونستم سوالمو کجا بپرسم. میشه راهنماییم کنید؟
سلام.
ممنون از نگاه مهربانتان.
ساخت کامل یک اسلاید شو به صورتی که ذکر کردید در لینک زیر آموزش داده شده است :
http://www.ittutorial.ir/jquery-cycle-slideshow
فرض کنیم اگه یک سایت داشته باشیم که لیستی از عکس کالاها رو بخواهیم به این صورت بچینیم خیلی شلوغ و
div تو div نمیشه؟ راه بهتری نیست؟
سلام
مبحثی که به شما آموزش داده شده روش استاتیک برای چیدن تعدادی عکس می باشد، طبیعی است که هرچه تعداد این عکس ها بالاتر برود خطوط کدی که باید طراح بنویسد بیشتر می شود.
برای پیاده سازی یک سایت این کار یعنی چیدمان عکس ها به صورت داینامیک پیاده سازی می شود، مثلاً تعدادی کالا در پایگاه داده ذخیره می شود که هر کدام داری یک عکس می باشند، این کالاها سپس با استفاده از چند خط کد ساده کنار هم چیده می شوند.
بهتر است پس از مطالعه HTML و CSS زبان های سمت سرور مثال php (به لینک beyamooz.com/php/62 مراجعه نمایید) یا ASP.NET (به لینک www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net مراجعه نمایید.) را فرا بگیرید.
باید اشاره کرد که پیش نیاز زبان های سمت سرور HTML و CSS است که باید به خوبی به آن اشراف داشت و دقیقاً مباحث فوق در آنجا بسیار کاربرد دارد.