snipt

Ctrl+h for KB shortcuts

Text only

jQuery Slideshow

$('#slideshow_splash').wrapInner('<div class="slideshow"></div>');
  $('#slideshow_splash').append('<div class="info"><div class="output"></div></div>');
  $('#slideshow_splash').append('<div id="slideshow_splash_nav"></div>');
  $('#slideshow_splash_nav').append('<span><a href="" id="slideshow_splash_prev" title="Previous Slide">Prev</a></span>');
  $('#slideshow_splash_nav').append('<span><a href="" id="slideshow_splash_next" title="Next Slide">Next</a></span>');
  $('#slideshow_splash_nav').append('<span><a href="" id="slideshow_splash_pause" title="Pause Slideshow">Pause</a></span>');
  $('#slideshow_splash_nav').append('<span><a href="" id="slideshow_splash_play" title="Play Slideshow">Play</a></span>');
  $('#slideshow_splash_pause').click(function() { $('#slideshow_splash .slideshow').cycle('pause'); return false; });
  $('#slideshow_splash_play').click(function() { $('#slideshow_splash .slideshow').cycle('resume'); return false; });
  $('#slideshow_splash').hover(
    function() { $('#slideshow_splash_nav').fadeIn(); },
    function() { $('#slideshow_splash_nav').fadeOut(); }
  );
  if ( $("#slideshow_splash").length > 0 ) {
    $('#slideshow_splash .slideshow').cycle({
      fx: 'scrollUp',
      timeout: 6000,
      delay: -2000,
      next:   '#slideshow_splash_next',
      prev:   '#slideshow_splash_prev',
      before: slideshowOnBefore,
      after: slideshowOnAfter
    });
  }
https://snipt.net/embed/63513def1b4a8a8c7e8c93ce24dc4792/
/raw/63513def1b4a8a8c7e8c93ce24dc4792/
63513def1b4a8a8c7e8c93ce24dc4792
text
Text only
24
2019-05-23T01:03:38
True
False
False
/api/public/snipt/1014/
jquery-slideshow
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>$(&#39;#slideshow_splash&#39;).wrapInner(&#39;&lt;div class=&quot;slideshow&quot;&gt;&lt;/div&gt;&#39;); </span><span id="L-2"><a name="L-2"></a> $(&#39;#slideshow_splash&#39;).append(&#39;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;output&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#39;); </span><span id="L-3"><a name="L-3"></a> $(&#39;#slideshow_splash&#39;).append(&#39;&lt;div id=&quot;slideshow_splash_nav&quot;&gt;&lt;/div&gt;&#39;); </span><span id="L-4"><a name="L-4"></a> $(&#39;#slideshow_splash_nav&#39;).append(&#39;&lt;span&gt;&lt;a href=&quot;&quot; id=&quot;slideshow_splash_prev&quot; title=&quot;Previous Slide&quot;&gt;Prev&lt;/a&gt;&lt;/span&gt;&#39;); </span><span id="L-5"><a name="L-5"></a> $(&#39;#slideshow_splash_nav&#39;).append(&#39;&lt;span&gt;&lt;a href=&quot;&quot; id=&quot;slideshow_splash_next&quot; title=&quot;Next Slide&quot;&gt;Next&lt;/a&gt;&lt;/span&gt;&#39;); </span><span id="L-6"><a name="L-6"></a> $(&#39;#slideshow_splash_nav&#39;).append(&#39;&lt;span&gt;&lt;a href=&quot;&quot; id=&quot;slideshow_splash_pause&quot; title=&quot;Pause Slideshow&quot;&gt;Pause&lt;/a&gt;&lt;/span&gt;&#39;); </span><span id="L-7"><a name="L-7"></a> $(&#39;#slideshow_splash_nav&#39;).append(&#39;&lt;span&gt;&lt;a href=&quot;&quot; id=&quot;slideshow_splash_play&quot; title=&quot;Play Slideshow&quot;&gt;Play&lt;/a&gt;&lt;/span&gt;&#39;); </span><span id="L-8"><a name="L-8"></a> $(&#39;#slideshow_splash_pause&#39;).click(function() { $(&#39;#slideshow_splash .slideshow&#39;).cycle(&#39;pause&#39;); return false; }); </span><span id="L-9"><a name="L-9"></a> $(&#39;#slideshow_splash_play&#39;).click(function() { $(&#39;#slideshow_splash .slideshow&#39;).cycle(&#39;resume&#39;); return false; }); </span><span id="L-10"><a name="L-10"></a> $(&#39;#slideshow_splash&#39;).hover( </span><span id="L-11"><a name="L-11"></a> function() { $(&#39;#slideshow_splash_nav&#39;).fadeIn(); }, </span><span id="L-12"><a name="L-12"></a> function() { $(&#39;#slideshow_splash_nav&#39;).fadeOut(); } </span><span id="L-13"><a name="L-13"></a> ); </span><span id="L-14"><a name="L-14"></a> if ( $(&quot;#slideshow_splash&quot;).length &gt; 0 ) { </span><span id="L-15"><a name="L-15"></a> $(&#39;#slideshow_splash .slideshow&#39;).cycle({ </span><span id="L-16"><a name="L-16"></a> fx: &#39;scrollUp&#39;, </span><span id="L-17"><a name="L-17"></a> timeout: 6000, </span><span id="L-18"><a name="L-18"></a> delay: -2000, </span><span id="L-19"><a name="L-19"></a> next: &#39;#slideshow_splash_next&#39;, </span><span id="L-20"><a name="L-20"></a> prev: &#39;#slideshow_splash_prev&#39;, </span><span id="L-21"><a name="L-21"></a> before: slideshowOnBefore, </span><span id="L-22"><a name="L-22"></a> after: slideshowOnAfter </span><span id="L-23"><a name="L-23"></a> }); </span><span id="L-24"><a name="L-24"></a> } </span></pre></div> </td></tr></table>
jquery