سبد خرید (0)

تبلیغات

ساخت گالری تصاویر در CSS

گالری تصاویر

Wiki

برای ساخت گالری تصاویر می توان از CSS استفاده کرد.

Klematis
توضیحات عکس بالا، در اینجا اضافه شود
Klematis
توضیحات عکس بالا، در اینجا اضافه شود
Klematis
توضیحات عکس بالا، در اینجا اضافه شود
Klematis
توضیحات عکس بالا، در اینجا اضافه شود

در مثال زیر، با استفاده از 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>
خودتان امتحان کنید »

دیدگاه‌ها  

+4 # edmond ariane 1395-09-15 19:21
salam khaste nabashin man ye moshkel daram oonam ine ke vaghti ye gallery mizanam aksam ofoghi nemishe amoodie yani rooye hamgharar migiran
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1395-09-16 09:28
سلام کدهای خودتون رو برامون ارسال کنید تا مشکل رو برطرف کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # لیلا 1395-06-17 12:17
سلام
خسته نباشید
من داخل notepad یه صفحه به عنوان گالری درست کردم و توش چند تا عکس گذاشتم. و تو browser هم درست نمایش داده میشه. اما وقتی browser زوم میکنم (کوچک یا یزرگ کردن) عکسا توی صفحه جا به جا میشن. چیکار کنم که ثابت بمونن؟ ممنون میشم جواب بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-06-17 16:33
سلام، بله حق با شماست در مثال بالا زمانی که اندازه مرورگر را کوچک و بزرگ می کنیم، تصاویر جابه جا می شوند و در واقع زیر هم قرار می گیرند. اگر مایل نیستید که این اتفاق بیافتد و در واقع می خواهید که در هر حال، 4 تصویر مثال بالا در یک خط قرار بگیرند، باید تمام آنها را داخل یک div دیگر قرار دهید و خصوصیت min-width را برای div با یک مقدار مناسب تنظیم نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # لیلا 1395-06-18 19:50
یعنی هر ردیف از عکسها رو توی یک div بذارم. مقدار مناسب برای min-width رو چطور باید تعیین کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-06-19 12:33
بنظر بنده بهتر است که کل عکس ها را درون یک div قرار دهیم و خصوصیت min-width را با مقدار مثلا 600 پیکسل تنظیم کنیم. مقدار 600 بستگی به نیاز شما دارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # rozhan 1394-11-11 15:35
با سلام
در این مثال قسمتی از کد div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
در body به چه صورت فراخوانی شده؟
با سپاس
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-11-12 07:09
این کلاس به عکسهایی که داخل یک DIV با کلاس img هستند، اعمال میشه. در داخل div با کلاس img، تمام عکس‌ها این خصوصیات تعریف شده در کلاس رو می‌گیرن.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سهرابی 1394-07-01 00:49
با سلام. نشکر از سایت خوبتون. حسته نباشید. ببخشید میخواستم برای سایت یه slide show درست کنم. در واقع یک اسلاید شو داره اما میخوام براش دکمه بذارم که قابلیت عوش شدن تصویر با صورت دستی(توسط کاربر) باشه. نمیدونستم سوالمو کجا بپرسم. میشه راهنماییم کنید؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شهربانو دوستی 1394-07-02 11:15
سلام.
ممنون از نگاه مهربانتان.
ساخت کامل یک اسلاید شو به صورتی که ذکر کردید در لینک زیر آموزش داده شده است :
http://www.ittutorial.ir/jquery-cycle-slideshow
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # سارا 1393-12-08 17:08
فرض کنیم اگه یک سایت داشته باشیم که لیستی از عکس کالاها رو بخواهیم به این صورت بچینیم خیلی شلوغ و
div تو div نمیشه؟ راه بهتری نیست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مظاهر نصوحی 1393-12-09 08:30
سلام
مبحثی که به شما آموزش داده شده روش استاتیک برای چیدن تعدادی عکس می باشد، طبیعی است که هرچه تعداد این عکس ها بالاتر برود خطوط کدی که باید طراح بنویسد بیشتر می شود.
برای پیاده سازی یک سایت این کار یعنی چیدمان عکس ها به صورت داینامیک پیاده سازی می شود، مثلاً تعدادی کالا در پایگاه داده ذخیره می شود که هر کدام داری یک عکس می باشند، این کالاها سپس با استفاده از چند خط کد ساده کنار هم چیده می شوند.
بهتر است پس از مطالعه HTML و CSS زبان های سمت سرور مثال php (به لینک http://beyamooz.com/php/62 مراجعه نمایید) یا ASP.NET (به لینک www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net مراجعه نمایید.) را فرا بگیرید.
باید اشاره کرد که پیش نیاز زبان های سمت سرور HTML و CSS است که باید به خوبی به آن اشراف داشت و دقیقاً مباحث فوق در آنجا بسیار کاربرد دارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی