tags:

views:

562

answers:

0

hi i have done slide show but i am new for jquery so i am unable to update so please help me In the following code i want that when i click on any image in slide show video related to that image will show and one other is when i go to last in slide show after it go to first

My HTML and php code is

       <table width="95%" border="0" cellpadding="5" cellspacing="0" bgcolor="CCCDE2">
           <tr height="20px"><td colspan="2"></td></tr>
                <?php
                                $sql="selectid,videotitle,videodescription,videofile,DATE_FORMAT(FROM_UNIXTIME(videodate),'%d/%m/%y') as videodate from ".DB_PREFIX."video"; 
           if($_REQUEST['id']!="")
               { 
             $sql.="where id= '$_REQUEST[id]'";
                    }
                    $sql.=" order by videodate desc limit 1";
                    $result = $db->sql_query($sql);
              while($row=$db->sql_fetchrow($result))
                {
                   ?>
            <tr>
    <td align="center" valign="middle" style="padding:15px" colspan="2"><div id="wrapper">
    <div id="fullsize">
        <div id="imgprev" class="imgnav" title="Previous Image"></div>
        <div id="imglink">

                    <a href="<?=$videoPath.$row['videofile']?>" style="display:block;width:500px;height:300px" id="player<?=$row['id']?>"></a> 
    <script> 
         flowplayer("player<?=$row['id']?>", "flowplayer/flowplayer-3.1.5.swf", { 
        clip:  { 
            autoPlay: false, 
            autoBuffering: false 
        } 
    }); 
    </script>

    </div>
        <div id="imgnext" class="imgnav" title="Next Image"></div>
        <div id="image"></div>
        <div id="information">
            <h3></h3>
            <p></p>
        </div>
    </div>
    <div id="thumbnails">
        <div id="slideleft" title="Slide Left"></div>
        <div id="slidearea">
            <div id="slider"></div>
        </div>
        <div id="slideright" title="Slide Right"></div>
    </div>
</div></td>
  </tr><?php }?>
  <tr >
    <td height="48" valign="top" colspan="2"><ul id="slideshow">
    <?php
                $sql1="select id,videotitle,videodescription,videofile,videothumb,DATE_FORMAT(FROM_UNIXTIME(videodate),'%d/%m/%y') as videodate from ".DB_PREFIX."video order by videodate desc";
              $result1 = $db->sql_query($sql1);
           while($row1=$db->sql_fetchrow($result1))
              {
              echo $videoPath.$row1['videothumb'];
               ?>

    <div><li>
        <h3><i><?=$row1['videodate']."</i> <b>".trim($row1['videotitle'])?> </b></h3>
        <span><?=trim($row1['videodescription'])?></span>
        <p></p>
        <a href="publicity-gallery.php?lnk=1&id=<?=$row1['id']?>"><img src="<?=$videoPath.$row1['videothumb']?>" alt=""  class="jimg"/>
    </a></li></div>
    <? }

               ?></ul>
           <script type="text/javascript" src="style/compressed.js"></script>
         <script type="text/javascript">

           $('slideshow').style.display='none';
          $('wrapper').style.display='block';
           var slideshow=new TINY.slideshow("slideshow");
         window.onload=function(){
    slideshow.auto=true;
    slideshow.speed=5;
    slideshow.link="linkhover";
    slideshow.info="information";
    slideshow.thumbs="slider";
    slideshow.left="slideleft";
    slideshow.right="slideright";
    slideshow.scrollSpeed=4;
    slideshow.spacing=5;
    slideshow.active="#fff";
    slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
                 </script>
    </td>
  </tr>
  <tr><td class="solid-line" colspan="2"></td></tr>

<tr><td colspan="2"></td>
</tr>
</table>

and compressed .js is following

          var TINY={};
                 function $(i)
                {
return document.getElementById(i)
}
function $$(e,p)
{
    p=p||document;return p.getElementsByTagName(e)
    }
    TINY.slideshow=function(n)
    {
        this.infoSpeed=this.imgSpeed=this.speed=10;
        this.thumbOpacity=this.navHover=70;
        this.navOpacity=25;
        this.scrollSpeed=5;
        this.letterbox='#000';
        this.n=n;this.c=0;
        this.a=[]};
        TINY.slideshow.prototype={
            init:function(s,z,b,f,q){s=$(s);
            var m=$$('li',s),i=0,w=0;
            this.l=m.length;
            this.q=$(q);
            this.f=$(z);
            this.r=$(this.info);
            this.o=parseInt(TINY.style.val(z,'width'));
            if(this.thumbs)
            {
                var u=$(this.left),r=$(this.right);
                u.onmouseover=new    Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
                u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');
                r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
                this.p=$(this.thumbs)
                }
                for(i;i<this.l;i++)
                {
                    this.a[i]={};
                    var h=m[i],a=this.a[i];
                    a.t=$$('h3',h)[0].innerHTML;
                    a.d=$$('p',h)[0].innerHTML;
                    a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
                    a.p=$$('span',h)[0].innerHTML;
                    if(this.thumbs){
                        var g=$$('img',h)[0];
                        this.p.appendChild(g);w+=parseInt(g.offsetWidth);
                        if(i!=this.l-1)
                        {
                            g.style.marginRight=this.spacing+'px';w+=this.spacing
                            }
                            this.p.style.width=w+'px';
                            g.style.opacity=this.thumbOpacity/100;
                            g.style.filter='alpha(opacity='+this.thumbOpacity+')';
                            g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
                            g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
                            g.onclick=new Function(this.n+'.pr('+i+',1)')}}if(b&&f){b=$(b);f=$(f);
                            b.style.opacity=f.style.opacity=this.navOpacity/100;
                            b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';
                b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');
                b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');
                b.onclick=new Function(this.n+'.mv(-1,1)');
                f.onclick=new Function(this.n+'.mv(1,1)')
                }
                this.auto?this.is(0,0):this.is(0,1)},mv:function(d,c){var t=this.c+d;
                this.c=t=t<0?this.l-1:t>this.l-1?0:t;
                this.pr(t,c)},pr:function(t,c){clearTimeout(this.lt);
                if(c){
                    clearTimeout(this.at)}this.c=t;
                    this.is(t,c)},is:function(s,c){
                        if(this.info)
                        {
                            TINY.height.set(this.r,1,this.infoSpeed/2,-1)
                            }var i=new Image();
                            i.style.opacity=0;
                            i.style.filter='alpha(opacity=0)';
                            this.i=i;
                            i.onload=new Function(this.n+'.le('+s+','+c+')');
                            i.src=this.a[s].p;if(this.thumbs){var a=$$('img',this.p),l=a.length,x=0;
                            for(x;x<l;x++){
                                a[x].style.borderColor=x!=s?'':this.active
                                }}
                                },le:function(s,c){this.f.appendChild(this.i);
                                var w=this.o-parseInt(this.i.offsetWidth);
                                if(w>0)
                                {
                                    var l=Math.floor(w/2);
                                    this.i.style.borderLeft=l+'px solid '+this.letterbox;this.i.style.borderRight=(w-l)+'px solid '+this.letterbox}
                                    TINY.alpha.set(this.i,100,this.imgSpeed);
                                    var n=new Function(this.n+'.nf('+s+')');
                                    this.lt=setTimeout(n,this.imgSpeed*100);
                                    if(!c)
                                    {this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)}
                                    if(this.a[s].l!=''){this.q.onclick=new Function('window.location="'+this.a[s].l+'"');
                this.q.onmouseover=new Function('this.className="'+this.link+'"');
                this.q.onmouseout=new Function('this.className=""');
                this.q.style.cursor='pointer'}
                else{this.q.onclick=this.q.onmouseover=null;
                this.q.style.cursor='default'}var m=$$('img',this.f);
                if(m.length>2){this.f.removeChild(m[0])}
                },nf:function(s){if(this.info){s=this.a[s];
                $$('h3',this.r)[0].innerHTML=s.t;
                $$('p',this.r)[0].innerHTML=s.d;this.r.style.height='auto';
                var h=parseInt(this.r.offsetHeight);
                this.r.style.height=0;TINY.height.set(this.r,h,this.infoSpeed,0)}}};
                TINY.scroll=function(){return{init:function(e,d,s){e=typeof e=='object'?e:$(e);
                var p=e.style.left||TINY.style.val(e,'left');
                e.style.left=p;
                var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0;
                e.si=setInterval(function()
                                          {
                                              TINY.scroll.mv(e,l,d,s)},20)
                },mv:function(e,l,d,s){var c=parseInt(e.style.left);if(c==l)
                {
                    TINY.scroll.cl(e)}else{var i=Math.abs(l+c);i=i<s?i:s;
                    var n=c-i*d;e.style.left=n+'px'
                    }
                    },cl:function(e){e=typeof e=='object'?e:$(e);
                    clearInterval(e.si)}}}();
                    TINY.height=function()
                    {
                        return{set:function(e,h,s,d)
                        {
                            e=typeof e=='object'?e:$(e);
                            var oh=e.offsetHeight,ho=e.style.height||TINY.style.val(e,'height');ho=oh-parseInt(ho);
                            var hd=oh-ho>h?-1:1;
                            clearInterval(e.si);
                            e.si=setInterval(function()
                                                      {
                                                          TINY.height.tw(e,h,ho,hd,s)},20)
                            },tw:function(e,h,ho,hd,s){var oh=e.offsetHeight-ho;
                            if(oh==h){clearInterval(e.si)}else{if(oh!=h)
                            {e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}}}}();
                            TINY.alpha=function(){return{set:function(e,a,s){e=typeof e=='object'?e:$(e);
                            var o=e.style.opacity||TINY.style.val(e,'opacity'),d=a>o*100?1:-1;e.style.opacity=o;
                            clearInterval(e.ai);e.ai=setInterval(function()
                                                                          {
                                                                              TINY.alpha.tw(e,a,d,s)},20)
                            },tw:function(e,a,d,s){var o=Math.round(e.style.opacity*100);
                            if(o==a)
                            {clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d;
                            e.style.opacity=n/100;e.style.filter='alpha(opacity='+n+')'}}}}();
                            TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e);
                            return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)
                            }
                            }
                            }
                            ();