رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
نحوه ساخت این گالری
#1
سلام
لطفا یکی به من کمک می کنه و راهنمای میکنه و بگه این گالری را چه جوری میشه ساخت؟می خواهم مثل این گالری را واسه وب سایتم بسازم ولی نمیدونم دقیقا چه جوری.
سورس کد را هم نگاه کردم ولی خودم موفق به ساختش نشدم. Confused
http://www.nicolastarierphotography.com/ 

ممنونم
پاسخ
تشکر شده توسط:
#2
دقیقا کجاش مشکل دارید؟
...
پاسخ
تشکر شده توسط:
#3
سلام
تقریبا همش آقای پورمحمد
گذاشتن عکسها توی صفحه و تنظیمات مربوط به عکسها را با cssمی تونم انجام بدهم ولی بقیه و موارد مربوط به جاوا اسکریپتش را نه.
پاسخ
تشکر شده توسط:
#4
اگه دقت کنید خیلی نیازی به جاوا اسکریپت نیست ، میتونید با css3 هم انجام بدید.
من نمونه کد رو نوشتم میتونید بسته به نیازتون تغییرش بدید.
<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            .block{
                display: block;
                height: 150px;
                width: 250px;
                position: relative;
                overflow: hidden;

            }
            .block,
            .block *{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            .block img{
                position: absolute;
                top: 0;
                left: 0;
                height: 150px;
                width: 250px;
                z-index: 1;
                transition: all .3s ease-in-out;
            }
            .block:hover img{
                height: 190px;
                width: 290px;
                top: -20px;
                left: -20px;
            }
            .block div{
                display: block;
                height: 150px;
                width: 250px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                color: #fff;
                text-align: center;
                background-color: rgba(0, 0, 0, 0);
                transition: all .3s ease-in-out;
            }
            .block:hover div{
                background-color: rgba(0, 0, 0, .5);
            }
            .block h3{
                display: block;
                max-width: 170px;
                border: 1px solid #fff;
                padding: 5px;
                margin: 0 auto;
                margin-top: 40px;
                transition: all .3s ease-in-out;
                transform: scale(3);
                opacity: 0;
            }
            .block p{
                display: block;
                color: #eee;
                margin-top: 10px;
                transition: all .3s ease-in-out;
                transform: scale(3);
                opacity: 0;
            }
            .block:hover h3,
            .block:hover p{
                transform: scale(1);
                opacity: 1;
            }
        </style>
    </head>
    <body>
        
        <div class="block">
            <img alt="" src="http://www.nicolastarierphotography.com/photos/zoom/27.jpg">
            <div>
                <h3>Title</h3>
                <p>Description</p>
            </div>
        </div>
        
    </body>
</html>
اگه تو این قسمت مشکل ندارید میمونه قسمتی که رو عکس کلیک میشه. وقتی رو عکس کلیک میشه پوزیشن قسمت گالری تغییر میکنه. یعنی خاصیت left یا margin-left بلوک مربوط به گالری تغییر میکنه و گالری نمایش داده میشه.
...
پاسخ
تشکر شده توسط: webdevelopper
#5
ببخشید آقای پورمحمد من نمی تونم قسمتی که روی عکس کلیک میشه و عکس بزرگتر میاد را بنویسم درواقع نمی دونم چه طوری بنویسمش .منظور و صحبت شما را متوجه می شوم ولی موقع پیاده سازی نمی تونم پیاده سازیش کنم.
لطفا یه کم بیشتر برام توضیح می دهید با یه مثال کوجک .
قسمت بالا را نوشته بودم ولی از قسمتی که روی عکس کلیک میشه به بعد را مشکل دارم.

ممنونم
پاسخ
تشکر شده توسط:
#6
کدش رو نوشتم بررسی کنید هرجا مشکل داشتید بپرسید.
<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,
            body,
            .gallery,
            .content,
            .grid,
            .slidshow,
            .slidshow .img{
                display: block;
                height: 100%;
                width: 100%;
            }
            .gallery{
                position: relative;
                overflow: hidden;
            }
            .content{
                position: absolute;
                left: 0;
                width: 200%;
            }
            .grid,
            .slidshow{
                position: relative;
                float: left;
            }
            .slidshow .img img{
                max-width: 100%;
                height: auto;
            }
            .slidshow .close{
                position: absolute;
                display: block;
                height: 48px;
                width: 48px;
                border-radius: 50%;
                background-color: rgba(0, 0, 0, .5);
                line-height: 48px;
                text-align: center;
                color: #fff;
                right: 50px;
                top: 50px;
                text-decoration: none;
                font-size: 22px;
                transition: all .2s ease-in-out;
            }
            .slidshow .close:before{
                content: "×";
            }
            .slidshow .close:hover{
                background-color: rgba(0, 0, 0, .8);
                transform: rotate(90deg);
            }

            .block{
                display: block;
                height: 150px;
                width: 20%;
                position: relative;
                overflow: hidden;
                float: left;
            }
            .block,
            .block *{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            .block img{
                position: absolute;
                top: 0;
                left: 0;
                height: 150px;
                width: 100%;
                z-index: 1;
                transition: all .3s ease-in-out;
            }
            .block.hover img,
            .block:hover img{
                transform: scale(1.25);
            }
            .block div{
                display: block;
                height: 150px;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                color: #fff;
                text-align: center;
                background-color: rgba(0, 0, 0, 0);
                transition: all .3s ease-in-out;
            }
            .block.hover div,
            .block:hover div{
                background-color: rgba(0, 0, 0, .5);
            }
            .block h3{
                display: block;
                max-width: 170px;
                border: 1px solid #fff;
                padding: 5px;
                margin: 0 auto;
                margin-top: 40px;
                transition: all .3s ease-in-out;
                transform: scale(3);
                opacity: 0;
            }
            .block p{
                display: block;
                color: #eee;
                margin-top: 10px;
                transition: all .3s ease-in-out;
                transform: scale(3);
                opacity: 0;
            }
            .block p i{
                color: #ccc;
            }
            .block.hover h3,
            .block:hover h3,
            .block.hover p,
            .block:hover p{
                transform: scale(1);
                opacity: 1;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <script>
            $(function () {

                function ww() {
                    return $(window).width();
                }

                function responsive() {
                    $('.grid, .slidshow').css({'width': ww()});
                }
                responsive();
                $(window).resize(function () {
                    responsive();
                });

                $(document).on('click', '.grid a', function (e) {
                    e.preventDefault();
                    var block = $(this);
                    var description = block.find('p').html();
                    block.addClass('hover');
                    block.find('p').html('<i>Loading ...</i>');
                    var zoom = block.find('img').data('zoom');
                    $('.slidshow .img').html('<img src="' + zoom + '">');
                    $('.slidshow .img img').load(function () {
                        $('.gallery .content').animate({'left': -ww()}, 1000, 'easeInQuint', function () {
                            block.find('p').html(description);
                            block.removeClass('hover');
                        });
                    });
                });


                $(document).on('click', '.gallery .close', function (e) {
                    e.preventDefault();
                    $('.gallery .content').animate({'left': 0}, 1000, 'easeInQuint');
                });

            });
        </script>
    </head>
    <body>

        <div class="gallery">
            <div class="content">
                <div class="grid">
                    <a href="#" class="block">
                        <img src="http://www.nicolastarierphotography.com/photos/small/26.jpg" data-zoom="http://www.nicolastarierphotography.com/photos/zoom/26.jpg" alt=""/>
                        <div>
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                    </a>
                    <a href="#" class="block">
                        <img src="http://www.nicolastarierphotography.com/photos/small/27.jpg" data-zoom="http://www.nicolastarierphotography.com/photos/zoom/27.jpg" alt=""/>
                        <div>
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                    </a>
                </div>
                <div class="slidshow">
                    <a class="close" href="#"></a>
                    <div class="img"></div>
                </div>
            </div>
        </div>

    </body>
</html>
...
پاسخ
تشکر شده توسط: php , webdevelopper
#7
سلام
من برای صفحه اول وبسایتم این گالری را نوشتم ولی وقتی اندازه را برای عرض و ارتفاع تنظیم می کنم کار نمی کنه؟(وقتی می خواهم عکسها تمام صفحه باشه دچار مشکل میشه)
این کد صفحه index.html
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>Pasargad Tour</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/main.css"/>
 <script src="js/jquery-1.11.3.min.js"></script>
 <script src="js/slider.js"></script>
</head>

<body>
<div id="page" >
 <nav></nav>
 <section>
   <div class="slideshow">
   <ul class="slider">
     <li><img src="Images/2.jpg" alt="" title="آرامگاه کوروش"></li>
      <li><img src="Images/3.jpg" alt="" title="آرامگاه کمبوجیه"></li>
      <li><img src="Images/4.jpg" alt="" title="آرامگاه کوروش"></li>
      <li><img src="Images/5.jpg" alt="" title="کتیبه هخامنشی"></li> 
    </ul> 
     <div id="next"></div>
     <div id="prev"></div>
   </div>
   
 </section >
 <footer></footer>
</div><!-- /#page -->
</body>
</html>

این کد صفحه main.css 

.slideshow{
	width:512px;
	height:284px;
	display:block;
	position:relative;
	margin:50px auto;
	overflow:hidden;
	//border:4px solid #000;
	
}
.clr{
	clear:both;
}
.slider{
	width:2048px;
	list-style:none;
	height:284px;
	float:left;
	position:relative;
	left:0;
	
}

.slider li img{
	display:block;
	width:512px;
	height:284px;
	float:left;
}

#next,#prev{
 width:50px;
 height:40px;
 position:absolute;
 top:106px;	
 border-radius:50%;
}

#next{
  right:3px;
  background-image:url(../images/j2.png);
	
}

#prev{
 left:3px;
 background-image:url(../images/j1.png);
} 
این هم کدصفحه slider.js

// JavaScript Document
$(function () {
    var current = 0;
    var speed = 8;
    var length = $('div.slideshow>ul.slider>li').length;
    
    var move = function (direction) {
        var start = current;
        if (direction == 'next') {
            current = (current + 1) % length;
        }
        else {
            current = (current - 1) % length;
            if (current === -1) {
                current = length+(-1);
            }
        }
        var x1 = start * -512;
        var x2 = current * -512;
        var clock = setInterval(function () {
            if (direction == 'next') {
                if (x1 > x2) {
                    x1 -= speed;
                    $('div.slideshow>ul.slider').css({'left':x1 +'px'}).fadeIn(1000);
                }
                else {
                    clearInterval(clock);
                }
            }
        }, 50);
        var clock1 = setInterval(function () {
           if (direction == 'prev') {
             if (x1 < x2) {
                  x1 += speed;
                  $('div.slideshow>ul.slider').css({'left':x1 +'px'});
              }
             else {
                 clearInterval(clock1);
               }
          }
        }, 50);
           
  
           
    };
    
    $('#prev').click(function () {
        move('prev'); 
		
    });
    $('#next').click(function () {
        move('next');
       
    });
});

کجای کد را اشتباه نوشتم که وقتی تمام صفحه میشه کار نمی کنه یا دچار مشکل میشه؟
درضمن می خوام گالری را طوری تنظیم کنم که هرچقدر تعداد عکسها بیشتر شد،نخواهم اندازه ها محاسبه و در کد تغییر بدهمُاین راچه جوری انجام بدهم؟
ممنونم
پاسخ
تشکر شده توسط:
#8
کدهاتون رو بصورت زیر تغییر دادم. الان میتونید اندازه slideshow. رو بصورت دلخواه مقدار دهی کنید. هم ریسپانسیو هستش هم میتونید بدون مشکل هر تعداد تصویر اضافه کنید.
در صورت نیاز به راهنمایی در مورد کدها بفرمایید توضیح بدم.

کدهای html:
<!DOCTYPE html >
<html>
   <head>
       <meta charset="utf-8" />
       <title>Pasargad Tour</title>
       <link rel="stylesheet" href="css/style.css"/>
       <link rel="stylesheet" href="css/main.css"/>
       <script src="js/jquery-1.11.3.min.js"></script>
       <script src="js/slider.js"></script>
   </head>

   <body>
       <div id="page">
           <nav></nav>
           <section>

               <div class="slideshow">
                   <div class="slider">
                       <div class="wrapper">
                           <div class="item"><img src="images/27.jpg" alt="" title="آرامگاه کوروش"></div>
                           <div class="item"><img src="images/28.jpg" alt="" title="آرامگاه کمبوجیه"></div>
                           <div class="item"><img src="images/27.jpg" alt="" title="آرامگاه کوروش"></div>
                           <div class="item"><img src="images/28.jpg" alt="" title="کتیبه هخامنشی"></div> 
                           <div class="item"><img src="images/27.jpg" alt="" title="آرامگاه کوروش"></div>
                           <div class="item"><img src="images/28.jpg" alt="" title="کتیبه هخامنشی"></div> 
                           <div class="item"><img src="images/27.jpg" alt="" title="آرامگاه کوروش"></div>
                           <div class="item"><img src="images/28.jpg" alt="" title="کتیبه هخامنشی"></div> 
                           <div class="item"><img src="images/27.jpg" alt="" title="آرامگاه کوروش"></div>
                       </div>
                   </div>
                   <div class="next"></div>
                   <div class="prev"></div>
               </div>

           </section>
           <footer></footer>
       </div><!-- /#page -->
   </body>
</html>

کدهای style.css:
*{
   margin: 0;
   padding: 0;
   outline: 0;
   line-height: 1.5;
   text-decoration: none;
   vertical-align: baseline;
   -webkit-font-ssoothing: antialiased;
   -moz-osx-font-ssoothing: grayscale;
   box-sizing: border-box;
   font-weight: normal;
}
img{
   border: 0;
}
*:before,
*:after{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

html{
   direction: rtl;
}

html,
body,
#page,
section{
   height: 100%;
   width: 100%;
}

.clr{
   clear:both;
}

.slideshow{
   width:100%;
   height:100%;
   display:block;
   position:relative;
}
.slideshow .slider{
   width:100%;
   height:100%;
   position:relative;
   overflow: hidden;
}
.slideshow .slider .wrapper{
   display: block;
   width: 10000px;
   height: 100%;
}
.slideshow .slider .item{
   display:block;
   width:500px;
   height:100%;
   float:right;
}
.slideshow .slider .item img{
   display: block;
   height: 100%;
   width: 100%;
   max-height: 100%;
   max-width: 100%;
}
.slideshow .next,
.slideshow .prev{
   width:50px;
   height:50px;
   position:absolute;
   top:50%;
   margin-top: -25px;
   border-radius:50%;
   cursor: pointer;
}
.slideshow .next{
   left:10px;
   background-color: #f00;
   background-image:url(../images/j2.png);
}
.slideshow .prev{
   right:10px;
   background-color: #f00;
   background-image:url(../images/j1.png);
} 

کدهای slider.js:
// JavaScript Document
$(function () {

   var items = 1;
   var speed = 800;
   var loop = 0; // Enable or disable loop, 0: Disable, 1: Enable
   var length = $('.slideshow .item').length;

   var maxClick = Math.ceil(length / items);
   var cClick = 1;

   // Return: slider width
   function sw()
   {
       return parseInt($('.slideshow .slider').outerWidth());
   }

   // Return: item width
   function iw()
   {
       return sw() / items;
   }

   // Set warpper and item(s) width
   function setSize()
   {
       $('.slideshow .wrapper').css({width: (sw() / items) * length});
       $('.slideshow .item').css({width: sw() / items});
       $('.slideshow .wrapper').css({marginRight: -((cClick - 1) * items * iw())});
   }
   setSize();
   $(window).resize(function () {
       setSize();
   });

   // Check current slide is last
   function isLast()
   {
       if (cClick >= maxClick)
       {
           return true;
       }
       return false;
   }

   // Check current slide is first
   function isFirst()
   {
       if (cClick <= 1)
       {
           return true;
       }
       return false;
   }


   function goToFirstSlide()
   {
       $('.slideshow .wrapper').animate({marginRight: 0}, speed);
       cClick = 1;
   }

   function goToLastSlide()
   {
       $('.slideshow .wrapper').animate({marginRight: -(iw() * (length - items))}, speed);
       cClick = maxClick;
   }

   function goToNextSlide()
   {
       if (!isLast())
       {
           var m = sw();
           if (length - (cClick * items) < items)
           {
               m = (length - (cClick * items)) * iw();
           }
           $('.slideshow .wrapper').animate({
               marginRight: '-=' + m
           }, speed);
           cClick++;
       }
       else if (loop === 1)
       {
           goToFirstSlide();
       }
   }

   function goToPreviousSlide()
   {
       if (!isFirst())
       {
           var m = sw();
           if (length - (cClick * items) < 0)
           {
               m = (items + (length - (cClick * items))) * iw();
           }
           $('.slideshow .wrapper').animate({
               marginRight: '+=' + m
           }, speed);
           cClick--;
       }
       else if (loop === 1)
       {
           goToLastSlide();
       }
   }


   $(document).on('click', '.slideshow .next', function () {
       goToNextSlide();
   });

   $(document).on('click', '.slideshow .prev', function () {
       goToPreviousSlide();
   });

});
...
پاسخ
تشکر شده توسط: php , webdevelopper
#9
ببخشید آقای پورمحمد
1)اگر بخواهم یک ساعت به این گالری اضافه کنم چطوری اضافه کنم؟می خواهم به صورت خودکار به عکس بعدی برود و اگر خود کاربر خواست از دکمه next و prev استفاده کنه؟
2) وهمچنین می خواهم اگر کاربر روی آخرین عکس بود با زدن دکمه next به اولین عکس برود و وقتی روی اولین عکس بود با زدن دکمه prev روی اولین عکس برود.

ممنون
پاسخ
تشکر شده توسط:
#10
برای مورد 1 کافیه کدی بنویسید که متد goToNextSlide رو بصورت دوره ای صدا بزنه.
مثلا کد زیر با صدا زدن متد goToNextSlide هر سه ثانیه اسلاید رو عوض میکنه.
setInterval(function () {
    goToNextSlide();
}, 3000);

برای مورد دوم هم کافیه مقدار متغییر loop رو به عدد 1 تغییر بدید.
...
پاسخ
تشکر شده توسط: webdevelopper
#11
البته میتونید برخی از کدهای بالا رو خلاصه هم کنید بصورت زیر:
setInterval(goToNextSlide, 3000);

$('.slideshow .next').click(goToNextSlide);

$('.slideshow .prev').click(goToPreviousSlide);
...
پاسخ
تشکر شده توسط: webdevelopper
#12
وقتی مقدار loop را برابر یک قرار می دهم با کلیلک روی دکمه next یا prev تمام عکسها یکدفعه و با سرعت تمام نشون داده می شه و زمانی که ساعت یا setinterval را تنظیم می کنم و توی کد می گذارم بعد از سه ثانیه به عکس بعدی میره ولی روی عکس آخر قفل میشه و باید صفحه را حتما refresh کنم تا دوباره اسلایدر کار کنه، چرا؟
پاسخ
تشکر شده توسط:
#13
وقتی مقدار loop رو 1 قرار میدید وقتی به آخر اسلاید برسه چون بعد از اون اسلایدی نیست برمیگرده به اسلاید اول.

در حالت auto play هم برای اینکه به آخر رسید متوقف نشه باید مقدار loop رو 1 قرار بدید تا وقتی به اسلاید آخر رسید برگرده و از اول Play کنه.
...
پاسخ
تشکر شده توسط:




کاربران در حال بازدید این موضوع: 1 مهمان