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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...