none
jquery галерея с данными из БД RRS feed

  • Вопрос

  • Доброго дня!

    Нужно прикрутить jquery галерею на страницу данные для которой берутся из БД. Вроде все получилось, но за исключением одного - если фотографий больше шести, в изначальном виде галереи можно листать список, а у меня не получается это сделать. Либо у меня отображаются только шесть фотографий, а их на самом деле больше и в этом случае не отображаются кнопки для листания, либо отображаются все фотографии, но по одной, а не по шесть и при перелистывании меняется одна.

    Просьбе помочь, подсказать что нужно изменить в соурсе, чтобы галерея работала правильно.

    Вот оригинальная версия галереи - http://www.jamesvec.com/plugins/timer_gallery/index.html

    Вот вариант когда кнопки для перелистывания работают, но отображаются по 1 фотографии, а не по 6:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
      <link rel="stylesheet" type="text/css" href="cssg/style.css" />
    <link rel="stylesheet" type="text/css" href="cssg/colorbox.css" />
    <script type="text/javascript" src="jsg/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jsg/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript" src="jsg/jquery.vec.timerGallery_ts.js"></script>
    <script type="text/javascript" src="jsg/jquery.colorbox-min.js"></script>
    
    
     <script type="text/javascript">
            $(document).ready(function () {
                $('#slide1').timerGallery({ idPre: 'img', interval: '0' });
              $("a[class='cboxElement']").colorbox();
            });
    
    </script>
    
    
    </asp:Content>
    
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="wrapper">
                                                            
    <div id="slide1" class="slideshow">
    	 <div class="img_cont">
      <ul class="main_images">
         <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource2">
                 <ItemTemplate>
                  <li> <a href='<%# Eval("ImgUrl") %>' class="cboxElement"> <img src='<%# Eval("ImgUrl") %>' width="250" /> </a> </li>
               </ItemTemplate>
          </asp:Repeater>
        </ul>
      </div>
    
        <div class="prev_btn"><a href="#" class="prev"><img src="images/previous.png" alt="previous"/></a></div>
         
        <div class="thumb_holder">
            
        <ul class="thumbs">
             <asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2">
                 <ItemTemplate>
            <li class="section">
                <ul class="sub_section">                
                         <li> <a ID='<%# "Link" + Eval("Id") %>' href="javascript:void(0);"> <img ID='<%# "img" + Eval("Id") %>' height="60" src='<%# Eval("ImgUrl") %>' width="58" alt=""/> </a> </li>
                    </ul>
                 </li>
                         <div class="caption">
                           <div class="image-title">
                           </div>
                         </div>
                     </ItemTemplate>
          </asp:Repeater> 
             </ul>
      </div>
      
      div class="next_btn"><a href="#" class="next"><img src="images/next.png" alt="next"/></a></div>   
    
      </div>
    </div>
    
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
               ConnectionString="<%$ ConnectionStrings:111111ConnectionString %>" 
               SelectCommand="SELECT * FROM [Images]"></asp:SqlDataSource>
    		   
    </asp:Content>
    Проблема где-то в диве - 
    <div class="img_cont">
    '

    21 апреля 2014 г. 8:10

Ответы

  • Код скрипта "jsg/jquery.vec.timerGallery_ts.js",  это первое. Понимаете в чём дело, с годами вырабатывается стиль написания краткого и лаконичного кода, чтобы легче было в нём разобраться. У вас с этим пока не очень, и это нормально на данном этапе. Я ни в коем случае не хочу обидеть вас этим. Просто предлагаю пересмотреть подход и постараться реализовать код проще. Т.е. не пробавть исправлять "костыльный код, а сделать его лучше", много подумав перед этим. Функционал который нужен вам можно реализовать намного проще. На данный момент нет возможности подкрепить свои слова кодом, но это так, поверьте. Мне на данный момент не очень просто разобраться в нём по быстрому. Основная причина – мало свободного времени, а вопросов много.

    Сделаем содержимое сообщества лучше, вместе!

    23 апреля 2014 г. 8:32
    Модератор

Все ответы

  • А вы можете создать тестовый проект и скинуть его куда-нибудь. Так будет проще разобраться, а то так времени нет разбирать код читая.

    Сделаем содержимое сообщества лучше, вместе!

    21 апреля 2014 г. 14:03
    Модератор
  • Добрый день!

    Вот тестовый проект - http://files.mail.ru/F1DDB2CE526449149589C02BDBFE2BE3

    Спасибо заранее за помощь!

    22 апреля 2014 г. 2:48
  • Не получилось разобраться?
    22 апреля 2014 г. 12:01
  • Вечером, на работе времени нет. :)

    Сделаем содержимое сообщества лучше, вместе!

    22 апреля 2014 г. 12:03
    Модератор
  • Спасибо!
    22 апреля 2014 г. 12:07
  • Посмотрел я ваш пример, чёрт ногу сломит. Всё можно организовать намного проще. Вот посмотрите как тут сделано.

    Сделаем содержимое сообщества лучше, вместе!

    23 апреля 2014 г. 5:27
    Модератор
  • Не понимаю где вы там нашли 'чёрт ногу сломит'. То что вы предлагает 'намного проще' совсем не то, что нужно.
    23 апреля 2014 г. 8:08
  • Код скрипта "jsg/jquery.vec.timerGallery_ts.js",  это первое. Понимаете в чём дело, с годами вырабатывается стиль написания краткого и лаконичного кода, чтобы легче было в нём разобраться. У вас с этим пока не очень, и это нормально на данном этапе. Я ни в коем случае не хочу обидеть вас этим. Просто предлагаю пересмотреть подход и постараться реализовать код проще. Т.е. не пробавть исправлять "костыльный код, а сделать его лучше", много подумав перед этим. Функционал который нужен вам можно реализовать намного проще. На данный момент нет возможности подкрепить свои слова кодом, но это так, поверьте. Мне на данный момент не очень просто разобраться в нём по быстрому. Основная причина – мало свободного времени, а вопросов много.

    Сделаем содержимое сообщества лучше, вместе!

    23 апреля 2014 г. 8:32
    Модератор
  • "jsg/jquery.vec.timerGallery_ts.js" - это оригинальный скрипт взятый как я писал в первом посте тут -  http://www.jamesvec.com/plugins/timer_gallery/index.html. Данный код работает, даже если он написан с костылями. 
    23 апреля 2014 г. 8:37
  • Там разметка чистая очень. Скорее всего она у вас генерируется неверно, надо посмотреть.

    Сделаем содержимое сообщества лучше, вместе!

    23 апреля 2014 г. 8:45
    Модератор