گالری تصاویر
برای ساخت گالری تصاویر می توان از 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>
ممنون از نگاه مهربانتان.
ساخت کامل یک اسلاید شو به صورتی که ذکر کردید در لینک زیر آموزش داده شده است :
http://www.ittutorial.ir/jquery-cycle-slideshow
خسته نباشید
من داخل notepad یه صفحه به عنوان گالری درست کردم و توش چند تا عکس گذاشتم. و تو browser هم درست نمایش داده میشه. اما وقتی browser زوم میکنم (کوچک یا یزرگ کردن) عکسا توی صفحه جا به جا میشن. چیکار کنم که ثابت بمونن؟ ممنون میشم جواب بدید.
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 است که باید به خوبی به آن اشراف داشت و دقیقاً مباحث فوق در آنجا بسیار کاربرد دارد.
در این مثال قسمتی از کد [dir=#555]div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}[/dir]در body به چه صورت فراخوانی شده؟
با سپاس