Как сделать функцию Листать фотографии в Фото галереи?

16 декабря 2008 г.

#

Как сделать функцию Листать фотографии в Фото галереи?

У меня есть, на сайте, информационная группа «фото галерея» и мне необходимо сделать функцию перелистывания «вперед» «назад» по списку информационных элементов. Причем на уровне просмотра «Большого изображения (в формате JPG)»
Либо сделать просмотр выделенного информационного элемента, в форме «Большого изображения» на одной странице со списком информационных элементов в «малых изображениях». Причем выбор инф. Элемента производится, как перелистыванием по списку кнопками «вперед» «назад», так и непосредственным выделением указателем мыши конкретного элемента из списка

Как например http://fotki.yandex.ru/calendar/users/ylarkov/view/86577/

И вообще существует потребность в кнопках далее в любом разделе сайта, чтобы была возможность у людей листать странички внутри раздела.

Подскажите пожалуйста решение данного вопроса.

Модератор 16 декабря 2008 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

reinkorn,
сделать вывода списка по 1, при просмотре списка есть возможность выводить большое фото. Вот Вам и листалка готовая.

16 декабря 2008 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

HostCMS,
Спасибо за подсказку, буду думать дальше. Только мне пока не понятно как сделать, чтоб список полностью отражался и при этом выделенный элемент...
Просто я новичек и я еще пока иду методом тыка.

Модератор 17 декабря 2008 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

reinkorn писал(а):

Только мне пока не понятно как сделать, чтоб список полностью отражался и при этом выделенный элемент…

Поясните, что Вы вкладываете в список полностью отображался?

17 декабря 2008 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

HostCMS писал(а):

Поясните, что Вы вкладываете в список полностью отображался?

У меня допустим есть 10 картинок.... На странице отображается мозаика из 10 малых изображений. Я выбираю и кликаю мышкой например по 3 изображению и его крупное изображение отображается внизу под списком из 10 малых изображений. А дальше я листаю нажимая кнопку далее и у меня отображается 4, 5, и тд .
Или вариант :
На странице отображается мозаика из 10 малых изображений и все. Я кликаю мышкой по одному из элементу и попадаю на следующую страницу с крупным изображением а там, как вы говорили вывод того же списка но по одному + крупное изображение.

30 декабря 2008 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

Ничего я не придумал Дурной башкой.

Если не трудно HostCMS, выложите пожалуйста пример XSL-шаблона где будет возможность отображаться мозаика из маленьких превью и если я кликаю по ссылке одной из превью на этой же странице отображается большая картинка (вызванная по ссылке)

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

Просто должна же быть у вас продумана навигация по горизонтали на любом уровне отображения элементов.
Просто я не врубенштейн как это сделать.

Модератор 31 декабря 2008 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

Вот пример "листалки" изображений. Если вы его примените к стандартной фотогалереи, то увидите пример работы

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="html" encoding="Windows-1251"/>
   <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="Windows-1251" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

   <xsl:template match="/document">
      <SCRIPT>
         <xsl:comment>
            <xsl:text disable-output-escaping="yes">
         <![CDATA[
         function ShowImgWindow(title, src, width, height)
         {
            obj = window.open("", "", "scrollbars=0,dialog=0,minimizable=1,modal=1,width="+width+",height="+height+",resizable=0");
            obj.document.write("<html>");
            obj.document.write("<head>");

            obj.document.write("<title>"+title+"</title>");

            obj.document.write("</head>");

            obj.document.write("<body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>");

            obj.document.write("<img src=\""+src+"\" />");

            obj.document.write("</body>");
            obj.document.write("</html>");
         }

          newInt = '';

         function move_step(top) {
            if (top == 0)
            {
               clearInterval(newInt);
            }
            else if (top == 1)
            {
               newInt = setInterval("step_up()",90);
            }
            else
            {
               newInt = setInterval("step_down()",90);
            }
         }

         function moveMouseOut()
         {
            if (newInt != '')
            {
               move_step(0)
            }
         }

         function step_up(){

            var step_scroll = 10;
            var scroll = scroll_clipper.scrollLeft;
            scroll_clipper.scrollLeft = scroll + step_scroll;
         }

         function step_down(){

            var step_scroll = 10;
            var scroll = scroll_clipper.scrollLeft;
            scroll_clipper.scrollLeft = scroll - step_scroll;
         }

         function ClearInt()
         {
            if(newInt)
            {
               clearInterval(newInt)
            }
         }

         function ShowPhoto(src, big_photo_name, src_big_image, width_big_image, height_big_image)
         {

            document.getElementById('foto').innerHTML = '<img onclick="ShowImgWindow(\''+big_photo_name+'\',\''+src_big_image+'\', ' + width_big_image + ',' + height_big_image +')" src="' + src + '" class="img_b" style="float:left; margin-right:10px;">';
         }

         ]]>
         </xsl:text>
         </xsl:comment>
      </SCRIPT>
      <h1>
         <xsl:value-of disable-output-escaping="yes" select="blocks/name"/>
      </h1>
      <xsl:value-of disable-output-escaping="yes" select="blocks/description"/>
      <br/>
      <br/>

      
      <table cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td style="vertical-align:middle; width:29px;">
               <img src="/images/l_arr.jpg" style="cursor:hand;" onMouseDown="javascript:move_step('-1')" onMouseUp="javascript:move_step('0')" onMouseOut="javascript:moveMouseOut()"/>
            </td>
            <td style="vertical-align:middle">
               <div id="scroll_clipper" style="width: 500px; height: 135px; overflow:auto;">
                  <div id="scroll_clipper2" style=" white-space: nowrap;">
                     <xsl:apply-templates select="blocks/items/item[item_status=1 and item_image != '']"/>
                  </div>
               </div>
            </td>
            <td style="vertical-align:middle; width:29px;" align="right">
               <img src="/images/r_arr.jpg" style="cursor:hand;" onMouseDown="javascript:move_step('1')" onMouseUp="javascript:move_step('0')" onMouseOut="javascript:moveMouseOut()"/>
            </td>
         </tr>
      </table>

      <div style=" float: left;  border: solid 1px #ffffff;" id="foto">
      <xsl:if test="item_image!=''">
         <xsl:variable name="big_photo_name" select="item_propertys/item_property[@xml_name='big_file1']/property_name"/>
         <xsl:variable name="src_big_image" select="item_propertys/item_property[@xml_name='big_file1']/property_file_path"/>
         <xsl:variable name="width_big_image" select="item_propertys/item_property[@xml_name='big_file1']/value/@width"/>
         <xsl:variable name="height_big_image" select="item_propertys/item_property[@xml_name='big_file1']/value/@height"/>

         <img class="img_b" style="float:left;"/>

      </xsl:if>
      </div>
   </xsl:template>

   <xsl:template match="blocks/items/item">

      <xsl:variable name="srcpath" select="item_image"/>
      <xsl:variable name="big_photo_name" select="item_name"/>

      <xsl:variable name="src_big_image" select="item_image"/>

      <xsl:variable name="width_big_image" select="item_image/@width"/>

      <xsl:variable name="height_big_image" select="item_image/@height"/>

      

      <img onclick="ShowPhoto('{$srcpath}', '{$big_photo_name}', '{$src_big_image}', {$width_big_image}, {$height_big_image})" src="{item_small_image}" class="gall"
           style="margin:0px 10px 0px 0px; cursor: pointer;"/>
   </xsl:template>
</xsl:stylesheet>

19 февраля 2009 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

а как здесь отредактировать код если будут использоваться доп. свойства элемента типа файл(т.е. у одного элемента заданны несколько фотографий)

Модератор 19 февраля 2009 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

kos, в приведенном ниже XSL приводится пример использования доп. свойства типа "Файл" с именем foto1. Если у вас несколько доп. свойств типа "Файл", которые необходимо отобразить, то для каждого из них (свойств) необходимо продублировать выделенный жирным код, соответственно, подставив вместо foto1 название конкретного доп. свойства.

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="html" encoding="Windows-1251"/>
   <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="Windows-1251" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

   <xsl:template match="/document">
      <SCRIPT>
         <xsl:comment>
            <xsl:text disable-output-escaping="yes">
         <![CDATA[
         function ShowImgWindow(title, src, width, height)
         {
            obj = window.open("", "", "scrollbars=0,dialog=0,minimizable=1,modal=1,width="+width+",height="+height+",resizable=0");
            obj.document.write("<html>");
            obj.document.write("<head>");

            obj.document.write("<title>"+title+"</title>");

            obj.document.write("</head>");

            obj.document.write("<body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>");

            obj.document.write("<img src=\""+src+"\" />");

            obj.document.write("</body>");
            obj.document.write("</html>");
         }

          newInt = '';

         function move_step(top) {
            if (top == 0)
            {
               clearInterval(newInt);
            }
            else if (top == 1)
            {
               newInt = setInterval("step_up()",90);
            }
            else
            {
               newInt = setInterval("step_down()",90);
            }
         }

         function moveMouseOut()
         {
            if (newInt != '')
            {
               move_step(0)
            }
         }

         function step_up(){

            var step_scroll = 10;
            var scroll = scroll_clipper.scrollLeft;
            scroll_clipper.scrollLeft = scroll + step_scroll;
         }

         function step_down(){

            var step_scroll = 10;
            var scroll = scroll_clipper.scrollLeft;
            scroll_clipper.scrollLeft = scroll - step_scroll;
         }

         function ClearInt()
         {
            if(newInt)
            {
               clearInterval(newInt)
            }
         }

         function ShowPhoto(src, big_photo_name, src_big_image, width_big_image, height_big_image)
         {

            document.getElementById('foto').innerHTML = '<img onclick="ShowImgWindow(\''+big_photo_name+'\',\''+src_big_image+'\', ' + width_big_image + ',' + height_big_image +')" src="' + src + '" class="img_b" style="float:left; margin-right:10px;">';
         }

         ]]>
         </xsl:text>
         </xsl:comment>
      </SCRIPT>
      <h1>
         <xsl:value-of disable-output-escaping="yes" select="blocks/name"/>
      </h1>
      <xsl:value-of disable-output-escaping="yes" select="blocks/description"/>
      <br/>
      <br/>

      
      <table cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td style="vertical-align:middle; width:29px;">
               <img src="/images/l_arr.jpg" style="cursor:hand;" onMouseDown="javascript:move_step('-1')" onMouseUp="javascript:move_step('0')" onMouseOut="javascript:moveMouseOut()"/>
            </td>
            <td style="vertical-align:middle">
               <div id="scroll_clipper" style="width: 500px; height: 135px; overflow:auto;">
                  <div id="scroll_clipper2" style=" white-space: nowrap;">
                     <xsl:apply-templates select="blocks/items/item[item_status=1 and item_image != '']"/>
                  </div>
               </div>
            </td>
            <td style="vertical-align:middle; width:29px;" align="right">
               <img src="/images/r_arr.jpg" style="cursor:hand;" onMouseDown="javascript:move_step('1')" onMouseUp="javascript:move_step('0')" onMouseOut="javascript:moveMouseOut()"/>
            </td>
         </tr>
      </table>

      <div style=" float: left;  border: solid 1px #ffffff;" id="foto">
      <xsl:if test="item_image!=''">
         <xsl:variable name="big_photo_name" select="item_propertys/item_property[@xml_name='big_file1']/property_name"/>
         <xsl:variable name="src_big_image" select="item_propertys/item_property[@xml_name='big_file1']/property_file_path"/>
         <xsl:variable name="width_big_image" select="item_propertys/item_property[@xml_name='big_file1']/value/@width"/>
         <xsl:variable name="height_big_image" select="item_propertys/item_property[@xml_name='big_file1']/value/@height"/>

         <img class="img_b" style="float:left;"/>

      </xsl:if>
      </div>
   </xsl:template>

   <xsl:template match="blocks/items/item">



      <a href="JavaScript:void(0)" onclick="ShowImgWindow('{item_propertys/item_property[@xml_name='foto1']/property_name}','/{item_propertys/item_property[@xml_name='foto1']/property_file_path}', {item_propertys/item_property[@xml_name='foto1']/value/@width}, {item_propertys/item_property[@xml_name='foto1']/value/@height})">
      <img src="/{item_propertys/item_property[@xml_name='foto1']/small_image/property_file_path}" class="gall" style="margin-top: 5px;"/></a>


   </xsl:template>
</xsl:stylesheet>

19 февраля 2009 г.

#

Re: Как сделать функцию Листать фотографии в Фото галереи?

как все просто, спасибо!

Авторизация

Мы используем куки (небольшие файлы, содержащие информацию о предыдущих посещениях сайта) и обработку пользовательских данных с помощью Яндекс.Метрики для лучшей работы сайта.
Оставаясь с нами, вы соглашаетесь на использование файлов куки.