Jump to content

Скрипт для прокрутки картинок


Recommended Posts

  • Replies 52
  • Created
  • Last Reply

Top Posters In This Topic

  • support

    19

  • mariolast

    12

  • evk

    8

  • YuraS

    6

Top Posters In This Topic

support

Нужно брать JS какой-либо, например на jquery.com и править шаблон шаблон новинок /templates/шаблон/module/new_products_default.html

По умолчанию нет такого, но подобные вещи легко довольно прикручиваются, в php не нужно копаться, просто подключается js файл и правится html-шаблон.

Link to post
Share on other sites
  • 2 weeks later...
mariolast

А можно ткнуть носом где? Я не спец в PHP и разобраться что к чему на том сайте непросто.

Link to post
Share on other sites
support

mariolast

Находите JS скрипт, читаете примеры и инструкцию, затем просто ставите, т.е. обычно нужно в шаблон подключить js файл и указать html-код, обычно атрбиут id задать.

Link to post
Share on other sites
  • 4 weeks later...
support

Если на странице карточки товара нужно сделать, тогда править шаблон карточки товара - /templates/шаблон/module/product_info/product_info_v1.html

Вставляя js код и исправляя html

Link to post
Share on other sites
mariolast

Это должно быть на стартовой странице магазина. А что там исправлять в html?

Link to post
Share on other sites
support

В примере установки скрипта ведь написан пример кода.

Link to post
Share on other sites
  • 2 weeks later...
mariolast

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

Вот как тут http://eroticland.vn.ua/index.php?nav_id=31

Попробовал править в шаблоне файл index.html

Получаю все время ошибку

Fatal error: Smarty error: [in vamshop/index.html line 104]: syntax error: unrecognized tag: uniqueid: 'mycrawler', style: { 'padding': '5px', 'width': '450px', 'background': 'lightyellow', 'border': '1px solid #CC3300' (Smarty_Compiler.class.php, line 455) in /home/eroticdr/public_html/eroticdreams/includes/external/smarty/Smarty.class.php on line 1092

Что то видимо не так...

Link to post
Share on other sites
support

А вот гляньте я как раз сегодня сделал на vamshop.ru прокрутку магазинов на базе VaM Shop по центру, на главной странице.

Ставится очень просто, используется jQuery + jMyCarousel - http://www.enova-tech.net/lab/jMyCarousel/

По ссылке есть и примеры кода и всё остальное.

По поводу ошибки, скорей всего нужно просто JS код в шаблон вставлять между:


{literal}
здесь JS код
{/literal}
[/code]

и ошибки не будет.

Link to post
Share on other sites
mariolast

Вот если бы оно еще само крутило, без помощи мышки, было бы то что надо.

А по поводу ошибки: тоесть вставить код из файла crawler.js того что в примере? Так?

Link to post
Share on other sites
support

Ну я ж не знаю, что за код Вы вставляете, нужно просто обернуть тот код, что Вы вставляете в шаблон, тэгом literal

Link to post
Share on other sites
mariolast

Литералом обернул, ошибка пропала, но почему то рисунки стоят, а не крутятся...

Link to post
Share on other sites
support

Наверное где-то ошибка в подключении js файлов.

Да и я б например jQuery использовал, проще ставится и настраивается.

Да и модулей подобных полно на plugins.jquery.com

Можно найти например по scroll

Link to post
Share on other sites
mariolast

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

А у меня вот что вышло http://eroticdreams.com.ua в самом низу

Link to post
Share on other sites
support

Так я ж Вам дал ссылку на тот же jMyCarousel

Там же можно сделать прокрутку просто при наведении мышки к стрелке, не нажимая.

Да и по scroll можно ведь найти много разных вариантов с примерами, с демками.

Link to post
Share on other sites
mariolast

В этом тексте нету ошибок? А то так и не работает что то скрипт. http://eroticdreams.com.ua/ в самом низу. Одни квадраты вертикально и нету прокрутки и рисунков :(

{literal}

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<script type="text/javascript" src="jMyCarousel.js"></script>

<!-- Optional -->

<script type="text/javascript" src="jquery.mousewheel.js"></script>

<script type="text/javascript">

$(function() {

    $(".jMyCarousel").jMyCarousel({

        visible: '3',

        eltByElt: true,

        evtStart: 'mousedown',

        evtStop: 'mouseup'

    });

});

</script>

<body>

<br/><br/>

<div class="jMyCarousel">

    <ul>

        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/1.jpg" width="64" height="64"></li>

        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/2.jpg" width="64" height="64"></li>

        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/3.jpg" width="64" height="64"></li>

        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/4.jpg" width="64" height="64"></li>

  </ul>

</div>

</body>

</html>

{/literal}

Link to post
Share on other sites
support

Ошибок особых нет, хотя лучше вот так:


  <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
  <script type="text/javascript" src="jMyCarousel.js"></script>
  <!-- Optional -->
  <script type="text/javascript" src="jquery.mousewheel.js"></script>
  <script type="text/javascript">
{literal}
      $(function() {

          $(".jMyCarousel").jMyCarousel({
              visible: '3',
              eltByElt: true,
              evtStart: 'mousedown',
              evtStop: 'mouseup'
          });

      });
{/literal}
  </script>
<body>
<br/><br/>
<div class="jMyCarousel">
    <ul>
        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/1.jpg" width="64" height="64"></li>
        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/2.jpg" width="64" height="64"></li>
        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/3.jpg" width="64" height="64"></li>
        <li><img src="/public_html/eroticdreams/templates/vamshop/carousel_img/1/4.jpg" width="64" height="64"></li>

  </ul>
</div>

</body>
</html>
[/code] Скорей всего, Вы ж css код не добавили в /templates/шаблон/stylesheet.css Да и путь до js файлов неправильно ведь указали, либо нет по этому пути js файлов. Да jQuery и jMyCarousel.js, посмотрите как например у меня прописаны script src на vamshop. Например из example2.css возьмите вот такой код:
[code]
div.jMyCarousel .prev{
background: url('images/left.png') center center no-repeat;
width:47px;
height:61px;
border:0px;
}

div.jMyCarousel .next{
background: url('images/right.png') center center no-repeat;
width:40px;
height:61px;
border:0px;
}

/** Carousel 2 **/
div.jMyCarousel{
margin:auto;
}

div.jMyCarousel ul{
background-color:transparent;
}

div.jMyCarousel ul li{
margin:0;
border:0px solid #444;
line-height:0px;
padding:3px;
}

div.jMyCarousel ul li a{ /* in case of link */
display:block;
margin:0px;
padding:0px;
}

div.jMyCarousel ul li a img{
display:block;
border:0px;
margin-bottom:0px;
padding-bottom:0px;
}

и вставьте в /templates/шаблон/stylesheet.css

А также в /templates/шаблон/images/ перепишите два файла:

left.png

right.png

Link to post
Share on other sites
mariolast

Добавил в   Index.htm

{literal}

<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<script type="text/javascript" src="jMyCarousel.js"></script>

<!-- Optional -->

<script type="text/javascript" src="jquery.mousewheel.js"></script>

<script type="text/javascript">

$(function() {

   $(".jMyCarousel").jMyCarousel({

       visible: '50%',

       auto : true,

       vertical : true,

       speed : 500

   });

});

</script>

</head>

<body>

<br/><br/>

<div class="jMyCarousel">

   <ul>

       <li><img src="/public_html/eroticdreams/templates/Dream-Xtc5/Images/00242_s.jpg" width="64" height="64"></li>

       <li><img src="/public_html/eroticdreams/templates/Dream-Xtc5/Images/00667_s.jpg" width="64" height="64"></li>

       <li><img src="/public_html/eroticdreams/templates/Dream-Xtc5/Images/00835_s.jpg" width="64" height="64"></li>

       <li><img src="/public_html/eroticdreams/templates/Dream-Xtc5/Images/00837_s.jpg" width="64" height="64"></li>

<li><img src="/public_html/eroticdreams/templates/Dream-Xtc5/Images/00840_s.jpg" width="64" height="64"></li>

<li><img src="/public_html/eroticdreams/templates/Dream-Xtc5/Images/00971_s.jpg" width="64" height="64"></li>

 </ul>

</div>

</body>

</html>

{/literal}

В stylesheet.css добавил следующее

div.jMyCarousel .up{

background: url('images/up.png') center center no-repeat;

width:16px;

height:16px;

border:0px;

}

div.jMyCarousel .down{

background: url('images/down.png') center center no-repeat;

width:16px;

height:16px;

border:0px;

}

/** Carousel 3 **/

div.jMyCarousel{

border:2px solid #aaa;

}

div.jMyCarousel ul{

background-color:#000;

}

div.jMyCarousel ul li{

margin:5px;

border:1px solid #aaa;

line-height:0px;

padding:3px;

}

div.jMyCarousel ul li a{ /* in case of link */

display:block;

}

div.jMyCarousel ul li a img{

display:block;

border:0px;  

Но картинок нет, и скрипт не работает, http://eroticdreams.com.ua/index.php

Такая вот картина в самом низу, черные квадраты на черном фоне

Вроде все верно делал...

Link to post
Share on other sites
support

Я ж писал уже, значит нет js файлов по указанному пути.

Вот у Вас написано:


  <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
  <script type="text/javascript" src="jMyCarousel.js"></script>
[/code]

В корневой папке магазина должны сидеть два этих файла.

Значит их нет, раз не работает.

Link to post
Share on other sites
mariolast

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

<script type="text/javascript" src="public_html/eroticdreams/templates/Dream-Xtc5/jquery-1.2.1.pack.js"></script>

<script type="text/javascript" src="public_html/eroticdreams/templates/Dream-Xtc5/jMyCarousel.pack.js"></script>

Результат тот же...:(

Link to post
Share on other sites
support

Ну как есть, если нет, вчера когда смотрел не было, поэтому и не работало.

Вот например у меня на vamshop.ru прописано:


<script type="text/javascript" src="jscript/jquery/jquery.js"></script>
<script type="text/javascript" src="jscript/jquery/plugins/jMyCarousel.pack.js"></script>
[/code]

И если в браузере открыть:

http://vamshop.ru/jscript/jquery/jquery.js

http://vamshop.ru/jscript/jquery/plugins/jMyCarousel.pack.js

Открываются файлы.

Link to post
Share on other sites
  • 3 months later...

продолжая тему:

http://vamshop.ru/forum/index.php?topic=3537.msg33130#msg33130

честно, не могу въехать, во всех этих примерах все картинки задаются заранее и вручную, я не могу понять, каким образомм яваскрипт будет сам брать товар со страницы магазина products_new.php и выводить его с прокруткой. А если допустим новинки некоторые убрались (они уже не новинки), а новые добавились, опять лезть в модуль и менять?

Link to post
Share on other sites

Нужно просто html-код шаблон поправить да и всё, ничего в php править не нужно.

т.е. если речь про jMyCarousel, то там картинки должны иметь вид:


<ul>
<li>картинка</li>
<li>картинка</li>
<li>картинка</li>
</ul>
[/code]

ну так просто поправьте html шаблон под такой вид да и всё.

т.е. нарисуйте такой hmtl-код и вставьте метку картинки.

По-моему, в примерах всё ясно и понятно написано, как подключать.

Link to post
Share on other sites

×
×
  • Create New...