jQuery slider in HTLM Block

S@ffz · September 17, 2011, 04:33:33 AM

Hi Everyone

I am trying to start up the jquery slider which i downloaded from the following Site SLIDES

SMF 2.0
SP 2.3.3

I can run from my pc but not in HTML block I have added to a page I created in SP, Here is the HTML I have in block
[code]
   <title>Slides, A Slideshow</title>

   <link rel="stylesheet" href="..css/global.css">

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
   <script src="js/slides.min.jquery.js"></script>
   <script>
      $(function(){
         $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true,
            animationStart: function(current){
               $('.caption').animate({
                  bottom:-35
               },100);
               if (window.console && console.log) {
                  // example return of current slide number
                  console.log('animationStart on slide: ', current);
               };
            },
            animationComplete: function(current){
               $('.caption').animate({
                  bottom:0
               },200);
               if (window.console && console.log) {
                  // example return of current slide number
                  console.log('animationComplete on slide: ', current);
               };
            },
            slidesLoaded: function() {
               $('.caption').animate({
                  bottom:0
               },200);
            }
         });
      });
   </script>
</head>
<body>
   <div id="container">
      <div id="slides">
         <img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
         <div id="slides">
            <div class="slides_container">
               <div class="slide">
                  <a href="http://www.graphicjunki.com/forum/img/slide-1.jpg" title="Slide 1" target="_blank">
                  <img src="img/slide-1.jpg" width="570" height="270" alt="Abstract One"></a>
                  <div class="caption" style="bottom:0">
                     <p>All Designs Created by S@ffz</p>
                  </div>
               </div>
               <div class="slide">
                  <a href="http://www.graphicjunki.com/forum/img/slide-2.jpg" title="Slide 2" target="_blank">
                  <img src= "img/slide-2.jpg" width="570" height="270" alt="Abstract two"></a>
                  <div class="caption">
                     <p>The strongest nation on earth is your imagi-nation</p>
                  </div>
               </div>
               <div class="slide">
                  <a href="http://www.graphicjunki.com/forum/img/slide-3.jpg" title="Slide 3" target="_blank">
                  <img src="img/slide-3.jpg" width="570" height="270" alt="Abstract Three"></a>
                  <div class="caption">
                     <p>Paint objects as you think them, not as you see them</p>
                  </div>
               </div>
               <div class="slide">
                  <a href="http://www.graphicjunki.com/forum/img/slide-4.jpg" title="Slide 4" target="_blank">
                  <img src="img/slide-4.jpg" width="570" height="270" alt="Abstract Four"></a>
                  <div class="caption">
                     <p>The Possible's slow fuse is lit By the Imagination.</p>
                  </div>
               </div>
               <div class="slide">
                  <a href="http://www.graphicjunki.com/forum/img/slide-5.jpg" title="Slide 5" target="_blank">
                  <img src="img/slide-5.jpg" width="570" height="270" alt="Abstract Five"></a>
                  <div class="caption">
                     <p>It's not what you look at that matters, it's what you see.</p>
                  </div>
               </div>
               <div class="slide">
                  <a href="http://www.graphicjunki.com/forum/img/slide-6.jpg" title="Slide 6!" target="_blank">
                  <img src="img/slide-6.jpg" width="570" height="270" alt="Abstract Six"></a>
                  <div class="caption">
                     <p>Perhaps imagination is only intelligence having fun</p>
                  </div>
               </div>
               <div class="slide">
                  <a href="http://www.graphicjunki.com/forum/img/slide-7.jpg" title="Slide 7" target="_blank">
                  <img src="img/slide-7.jpg" width="570" height="270" alt="Abstract Seven!"></a>
                  <div class="caption">
                     <p>When patterns are broken, new worlds emerge</p>
                  </div>
               </div>
            </div>
            <a href="http://www.graphicjunki.com/forum/img/arrow-prev.png" class="prev">
            <img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
            <a href="http://www.graphicjunki.com/forum/img/arrow--next.png" class="next">
            <img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
         </div>
         <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
      </div>
      <div id="footer">
         <p>Abstract Fractals Created by S@ffz

Kryzen · September 17, 2011, 04:35:12 AM

Have you uploaded all js files? Have a nice weekend

Dr. Deejay

S@ffz · September 17, 2011, 05:05:03 AM

yes all files are on the server

S@ffz · September 17, 2011, 05:12:02 AM

I have finally done it.

Thanks Deejay for replying

SOLVED

Kryzen · September 17, 2011, 05:16:55 AM

No problem, what fixed it?

Simple Portal Archived Forum

User Info

Who's Online

Team Blog

Recent Posts

jQuery slider in HTLM Block

S@ffz

Kryzen

S@ffz

S@ffz

Kryzen