[Помощь] Помогите со скриптом слайдера

Тема в разделе "WebAsyst", создана пользователем mihaa, 11 май 2012.

Модераторы: mdss
  1. mihaa

    mihaa Создатель

    Регистр.:
    11 апр 2012
    Сообщения:
    11
    Симпатии:
    0
    Хоть тема и не напрямую относится к Вебасист, но пытаюсь установить слайдер в данный движек. Суть проблеммы в том что как таковой слайдер нормально работает в дриамвиаре, но при переносе на хостинг слайдер не работает. Проблема заключается в том что переменная создающаяся (для настройки ява скрипта слайдера) в основе НТМЛ, не корректно создается и понимается на хостинге .... как вариант необходимо данные из переменной вставить напрямую в скрипт и все будет ок, но как это сделать я покачто незнаю, метод научного *тыка* не помог ) может быть кто нить знает ява скрипт и подскажет ? )
    Создание переменной в диве НТМЛ (причем если перенести до /Head то скрипт не работает и в дриамвиаре) :

    HTML:
    var slideshow=new TINY.slider.slide('slideshow',{
     
    id:'slider',
     
    auto:10,
     
    resume:true,
     
    vertical:false,
     
    navid:'pagination',
     
    activeclass:'current',
     
    position:0,
     
    rewind:false,
     
    elastic:true,
     
    left:'slideleft',
     
    right:'slideright'
     
    });
     
    </script>
     
    и сам ява скрипт подключаемый к НТМЛ :
     
    var TINY={};
     
    function T$(i){return document.getElementById(i)}
     
    function T$$(e,p){return p.getElementsByTagName(e)}
     
    TINY.slider=function(){
     
    function slide(n,p){this.n=n; this.init(p)}
     
    slide.prototype.init=function(p){
     
    var s=this.x=T$(p.id), u=this.u=T$$('ul',s)[0], c=this.m=T$$('li',u), l=c.length, i=this.l=this.c=0; this.b=1;
     
    if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
     
    this.a=p.auto||0; this.p=p.resume||0; this.r=p.rewind||0; this.e=p.elastic||false; this.v=p.vertical||0; s.style.overflow='hidden';
     
    for(i;i<l;i++){if(c.parentNode==u){this.l++}}
     
    if(this.v){;
     
    u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
     
    }else{
     
    u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
     
    }
     
    this.nav(p.position||0);
     
    if(p.position){this.pos(p.position||0,this.a?1:0,1)}else if(this.a){this.auto()}
     
    if(p.left){this.sel(p.left)}
     
    if(p.right){this.sel(p.right)}
     
    },
     
    slide.prototype.auto=function(){
     
    this.x.ai=setInterval(new Function(this.n+'.move(1,1,1)'),this.a*1000)
     
    },
     
    slide.prototype.move=function(d,a){
     
    var n=this.c+d;
     
    if(this.r){n=d==1?n==this.l?0:n:n<0?this.l-1:n}
     
    this.pos(n,a,1)
     
    },
     
    slide.prototype.pos=function(p,a,m){
     
    var v=p; clearInterval(this.x.ai); clearInterval(this.x.si);
     
    if(!this.r){
     
    if(m){
     
    if(p==-1||(p!=0&&Math.abs(p)%this.l==0)){
     
    this.b++;
     
    for(var i=0;i<this.l;i++){this.u.appendChild(this.m.cloneNode(1))}
     
    this.v?this.u.style.height=(this.l*this.h*this.b)+'px':this.u.style.width=(this.l*this.w*this.b)+'px';
     
    }
     
    if(p==-1||(p<0&&Math.abs(p)%this.l==0)){
     
    this.v?this.u.style.top=(this.l*this.h*-1)+'px':this.u.style.left=(this.l*this.w*-1)+'px'; v=this.l-1
     
    }
     
    }else if(this.c>this.l&&this.b>1){
     
    v=(this.l*(this.b-1))+p; p=v
     
    }
     
    }
     
    var t=this.v?v*this.h*-1:v*this.w*-1, d=p<this.c?-1:1; this.c=v; var n=this.c%this.l; this.nav(n);
     
    if(this.e){t=t-(8*d)}
     
    this.x.si=setInterval(new Function(this.n+'.slide('+t+','+d+',1,'+a+')'),10)
     
    },
     
    slide.prototype.nav=function(n){
     
    if(this.g){for(var i=0;i<this.l;i++){this.g.className=i==n?this.s:''}}
     
    },
     
    slide.prototype.slide=function(t,d,i,a){
     
    var o=this.v?parseInt(this.u.style.top:( parseInt(this.u.style.left);
     
    if(o==t){
     
    clearInterval(this.x.si);
     
    if(this.e&&i<3){
     
    this.x.si=setInterval(new Function(this.n+'.slide('+(i==1?t+(12*d:( t+(4*d))+','+(i==1?(-1*d:( (-1*d))+','+(i==1?2:3)+','+a+')'),10)
     
    }else{
     
    if(a||(this.a&&this.p)){this.auto()}
     
    if(this.b>1&&this.c%this.l==0){this.clear()}
     
    }
     
    }else{
     
    var v=o-Math.ceil(Math.abs(t-o)*.1)*d+'px';
     
    this.v?this.u.style.top=v:this.u.style.left=v
     
    }
     
    },
     
    slide.prototype.clear=function(){
     
    var c=T$$('li',this.u), t=i=c.length; this.v?this.u.style.top=0:this.u.style.left=0; this.b=1; this.c=0;
     
    for(i;i>0;i--){
     
    var e=c[i-1];
     
    if(t>this.l&&e.parentNode==this.u){this.u.removeChild(e); t--}
     
    }
     
    },
     
    slide.prototype.sel=function(i){
     
    var e=T$(i); e.onselectstart=e.onmousedown=function(){return false}
     
    }
     
    return{slide:slide}
     
    }();
     
  2. mihaa

    mihaa Создатель

    Регистр.:
    11 апр 2012
    Сообщения:
    11
    Симпатии:
    0
    Прикрепил сам скрипт слайдера, сам слайдер хорош тем что прост и без накруток... или может у кого нибудь есть более простой, основная функция это смена картинок при наведении на иконки или автоматом по времени...
     

    Вложения:

    • tinyslider2.zip
      Размер файла:
      472,4 КБ
      Просмотров:
      53
  3. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    инициализацию скрипта литералами обрами и все заработает
    HTML:
    <script type="text/javascript">
    {literal}
    var slideshow=new TINY.slider.slide('slideshow',{
        id:'slider',
        auto:4,
        resume:true,
        vertical:false,
        navid:'pagination',
        activeclass:'current',
        position:0,
        rewind:false,
        elastic:true,
        left:'slideleft',
        right:'slideright'
    });
    {/literal}
    </script>
     
    mihaa нравится это.
  4. mihaa

    mihaa Создатель

    Регистр.:
    11 апр 2012
    Сообщения:
    11
    Симпатии:
    0
    Большое спасибо ! если не сложно расскажите кратко в чем была проблема и почему дриамвиар ругается при закрытии литеры как на синтаксическую ошибку ? а так все заработало.
     
  5. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    628
    Симпатии:
    260
    Для DreamViewer есть плагин Smarty tag translator для работы со Smarty. Теги {literal} относятся к Smarty, и поэтому у вас были синтаксические ошибки. Этот плагин должен решить вопрос
     
  6. sapamer

    sapamer Создатель

    Регистр.:
    21 мар 2012
    Сообщения:
    10
    Симпатии:
    0
    А можно поподробней расписать саму установку слайдера?
     
  7. mihaa

    mihaa Создатель

    Регистр.:
    11 апр 2012
    Сообщения:
    11
    Симпатии:
    0
    ставите код скрипта из нтмл в то место своего сайта где хотите видеть слайдер, в head прописываете подключение ява скрипта и css , меняете картинки в images на свои, если коротко то как то так )
     
  8. phil74

    phil74 Постоялец

    Регистр.:
    1 мар 2012
    Сообщения:
    63
    Симпатии:
    16
    а куда его закидывать?
     
  9. newtimes

    newtimes Магаины Opencart

    Регистр.:
    2 апр 2010
    Сообщения:
    167
    Симпатии:
    8
  10. mihaa

    mihaa Создатель

    Регистр.:
    11 апр 2012
    Сообщения:
    11
    Симпатии:
    0
    ну так скажем мне удобнее было сделать папку в корне файлов магазина и туда сбрасывать все файлы свои чтоб не мучаться с адресацией. сам ява скрипт кидаете в эту папку, до хэдера прописываете путь к ява скрипту, а тело скрипта НТМЛ для самого движка копируете с экземпляра и вставляете к примеру на страницу основного окна (home) (незабудьте картинки тоже сбросить в свою папку и прописать их в теле НТМЛ)