Тема: Как добавить ссылку в скрипт JS

Данный код выводит слайды из заданой папки, не получается сделать чтобы при выводе каждого слайда название файла являлось ссылкой на кртинку, на данный момент он просто выводит изображение... но без кликабельной ссылки, ссылку добавить никак не получается sad кто знает как это реализовать?
ну или просто как нибуть сделать:

        <ul id="thumbs"> 
            <li value="1"></li> 
            <li value="2"></li> 
        </ul> 

кликабельными? roll

как мне кажется ето можно добавить в коде JS, пытался через HTML добивить ссылку на теги <li></li> но никак не вышло((

JS:

var slideShow=function(){ 
    var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl; 
    ta=document.getElementById(thumbid); ia=document.getElementById(imgid); 
    t=ta.getElementsByTagName('li'); ie=document.all?true:false; 
    st=3; ss=3; ft=10; fs=5; xp,yp=0; 
    return{ 
        init:function(){ 
            document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)}; 
            ys=this.toppos(ta); ye=ys+ta.offsetHeight; 
            len=t.length;tar=[]; 
            for(i=0;i<len;i++){ 
                var id=t[i].value; tar[i]=id; 
                t[i].onclick=new Function("slideShow.getimg('"+id+"')"); 
                if(i==0){this.getimg(id)} 
            } 
            tarl=tar.length; 
        }, 
        scrl:function(d){ 
            clearInterval(ta.timer); 
            var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10) 
            ta.timer=setInterval(function(){slideShow.mv(d,l)},st); 
        }, 
        mv:function(d,l){ 
            ta.style.left=ta.style.left||'0px'; 
            var left=ta.style.left.replace('px',''); 
            if(d==1){ 
                if(l-Math.abs(left)<=ss){ 
                    this.cncl(ta.id); ta.style.left='-'+l+'px'; 
                }else{ta.style.left=left-ss+'px'} 
            }else{ 
                if(Math.abs(left)-l<=ss){ 
                    this.cncl(ta.id); ta.style.left=l+'px'; 
                }else{ta.style.left=parseInt(left)+ss+'px'} 
            } 
        }, 
        cncl:function(){clearTimeout(ta.timer)}, 
        getimg:function(id){ 
            if(auto){clearTimeout(ia.timer)} 
            if(ci!=null){ 
                var ts,tsl,x; 
                ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0; 
                for(x;x<tsl;x++){ 
                    if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)} 
                } 
            } 
            if(!document.getElementById(id)){ 
                var i=document.createElement('img'); 
                ia.appendChild(i); 
                i.id=id; i.av=0; i.style.opacity=0; 
                i.style.filter='alpha(opacity=0)'; 
                i.src=imgdir+'/'+id+imgext; 
            }else{ 
                i=document.getElementById(id); clearInterval(i.timer); 
            } 
            i.timer=setInterval(function(){slideShow.fdin(i)},fs); 
        }, 
        nav:function(d){ 
            var c=0; 
            for(key in tar){if(tar[key]==ci.id){c=key}} 
            if(tar[parseInt(c)+d]){ 
                this.getimg(tar[parseInt(c)+d]); 
            }else{ 
                if(d==1){ 
                    this.getimg(tar[0]); 
                }else{this.getimg(tar[tarl-1])} 
            } 
        }, 
        auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)}, 
        fdin:function(i){ 
            if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'} 
            if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i} 
        }, 
        fdout:function(i){ 
            i.av=i.av-fs; i.style.opacity=i.av/100; 
            i.style.filter='alpha(opacity='+i.av+')'; 
            if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}} 
        }, 
        lim:function(){ 
            var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4;  
            bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa; 
        }, 
        pos:function(e){ 
            xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;  
            yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY; 
            if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){ 
                slideShow.scrl(-1); 
            }else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){ 
                slideShow.scrl(1); 
            }else{slideShow.cncl()} 
        }, 
        leftpos:function(t){ 
            var l=0; 
            if(t.offsetParent){ 
                while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent} 
            }else if(t.x){l+=t.x} 
            return l; 
        }, 
        toppos:function(t){ 
            var p=0; 
            if(t.offsetParent){ 
                while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent} 
            }else if(t.y){p+=t.y} 
            return p; 
        } 
    }; 
}(); 

window.onload=function(){slideShow.init(); slideShow.lim()};

Вывод слайда:

        <div id="image"> 
        <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a> 
        <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a> 
        </div> 

        <ul id="thumbs"> 
            <li value="1"></li> 
            <li value="2"></li> 
        </ul> 

<script type="text/javascript"> 
var imgid = 'image'; 
var imgdir = 'slide'; 
var imgext = '.jpg'; 
var thumbid = 'thumbs'; 
var auto = true; 
var autodelay = 5; 
</script> 
<script type="text/javascript" src="slide.js"></script>

CSS:

#image {position:relative; width:899px; height:260px; padding:5px; url(../images/loading.gif) center center no-repeat} 
#image img {position:absolute; top:5px; left:5px; margin:0; padding:0} 
.imgnav {position:absolute; height:200px; z-index:100; height:200px; width:20%; z-index:100; outline:none; cursor:pointer; margin:0; padding:0} 
#thumbs {list-style:none; margin:0; padding:0} 
#previmg {left:0; background:url(../images/left.png) left center no-repeat; border-left:5px solid #FFF} 
#nextimg {right:0; background:url(../images/right.png) right center no-repeat; border-right:5px solid #FFF}
Strawberry 1.1.1

Re: Как добавить ссылку в скрипт JS

Killa, вы не пишете, куда должны вести кликабельные ссылки.

Выводить имена файлов с картинками в виде ссылок - это придётся переделывать очень много кода. А вот чтобы сделать кликабельными картинки, ищете в JS строку:

i.src=imgdir+'/'+id+imgext; 

и добавляете после неё:

i.onclick='location.href=что_открыть';

"что_открыть" - это имя файла (страницы, картинки и т.п.), который будет открываться по ссылке.

Например, у вас слайды (уменьшенные изображения) лежат в папке slide, а нормальные изображения - в папке full, тогда:

i.onclick='location.href=full/'+id+imgext;

Как-то так. Чужой код - всегда потёмки.

Re: Как добавить ссылку в скрипт JS

оу круто спасибо! я согу вставить в место: что_открыть переменную из PHP ? к примеру $url_big_img ?

этот скрипт я урезал убрал лишнее он просто показывает большие картинки с эффектом и кнопочками вперед и назад, а выводить картинки я буду к примеру из файла img.txt где хранится информация:

ссылка на кртинку--адресс ссылки
ссылка на кртинку2--адресс ссылки2
ссылка на кртинку3--адресс ссылки3
...

поэтому и возник вопрос могу ли я переменную $url_big_img поместить в js файл ?

зы, да чужой код ето лес smile

Strawberry 1.1.1

Re: Как добавить ссылку в скрипт JS

Killa пишет:

могу ли я переменную $url_big_img поместить в js файл

Вряд ли, так как файл slide.js внешний и к нему php никак не приделать. Если только попробовать содержимое этого файла вставить в страницу, т.е. вместо:

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

написать:

<script type="text/javascript">
...Содержимое файла slide.js...
</script>

а уже на ней втыкать php-код вместо "что_открыть". Но, некоторый "обман зрения" всё-таки понадобится.

Дорогу осилит идущий!

Re: Как добавить ссылку в скрипт JS

ух как yikes ОЛОЛО кошмар roll

Извиняюсь но может быть Вы встречали просто скрипт слайдов который выполняет функции:
1. плавная смена картинок
2. стрелки вперед назад

+ чтоб изображения выводились приблизительно таким кодом:

<a href="http://www.site.ru/link_news.html"><img src="адрес к изображению"></a>
<a href="http://www.site.ru/link_news.html"><img src="адрес к изображению2"></a>

Весь выше указаный код я выдернул из этого скрипта:
Демо: http://sandbox.leigeber.com/slideshow/
Сайт скрипта: http://www.leigeber.com/2008/05/ajax-im … slideshow/

но с его помощью не получается сделать к каждой картинке свою ссылку sad

Выводить изображения буду таким (немного нелепым) методом:

Код вывода:

<?php 
  $arr = file("base/slide.txt"); 
  $i = 0;  
  foreach($arr as $line) 
  { 
    list($urlimg, $lnk) = explode("--", $line); 
    $user['urlimg'][]= $urlimg; 
    $user['lnk'][] = $lnk; 
  } 
  for($i=count($arr)-1; $i>=0; $i--) 
  { 
    echo " 
<a href='".$user['lnk'][$i]."' ><img src='".$user['urlimg'][$i]."'></a>
    "; 
  } 
?>

Файл base/slide.txt

slide/img1.jpg--http://www.123.ru--
slide/img2.jpg--http://www.345.ru--
slide/img3.jpg--http://www.678.ru--
...


зы по поводу ссылки сначало не работало, оказалось забыли ковычки:
"location.href='URL'"

сделал вот так все заработало....

i.onclick= function(){ 
  location.href='page.php?id='+id; 
  //id должна быть глобальной переменной 
}

4 часа, 49 минут и 56 секунд спустя:

только лохонулся кажись, почему то он может считывать только цифровые имена файлов а буквенные не может sad(((((((

Отредактировано Killa (25 Feb 2010 20:23:35)

Strawberry 1.1.1

Re: Как добавить ссылку в скрипт JS

ANT-Soft пишет:

Дорогу осилит идущий!