PDA

View Full Version : Help - How to install Elastic Image Slideshow?



Leandro Figueiredo
October 21, 2013, 01:23 PM
I'm thinking of installing Elastic Image Slideshow to get more attention to my site, but I'm with problems with the jquery.min.js

and

<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>w/

Can anyone help?

Source: http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/

Thanks

Viktor
October 22, 2013, 03:41 AM
Hello Leandro,

Would you please add {literal} before <script
and {/literal} after </script>

Leandro Figueiredo
October 22, 2013, 12:11 PM
Hello Viktor,

The source code:

http://tympanus.net/Tutorials/ElasticSlideshow/js/jquery.eislideshow.js
http://tympanus.net/Tutorials/ElasticSlideshow/js/jquery.easing.1.3.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js



<div class="container">
<div class="wrapper">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="images/large/6.jpg" alt="image06"/>
<div class="ei-title">
<h2>Passionate</h2>
<h3>Seeker</h3>
</div>
</li>
<li>
<img src="images/large/1.jpg" alt="image01" />
<div class="ei-title">
<h2>Creative</h2>
<h3>Duet</h3>
</div>
</li>
<li>
<img src="images/large/2.jpg" alt="image02" />
<div class="ei-title">
<h2>Friendly</h2>
<h3>Devil</h3>
</div>
</li>
<li>
<img src="images/large/3.jpg" alt="image03"/>
<div class="ei-title">
<h2>Tranquilent</h2>
<h3>Compatriot</h3>
</div>
</li>
<li>
<img src="images/large/4.jpg" alt="image04"/>
<div class="ei-title">
<h2>Insecure</h2>
<h3>Hussler</h3>
</div>
</li>
<li>
<img src="images/large/5.jpg" alt="image05"/>
<div class="ei-title">
<h2>Loving</h2>
<h3>Rebel</h3>
</div>
</li>
<li>
<img src="images/large/7.jpg" alt="image07"/>
<div class="ei-title">
<h2>Crazy</h2>
<h3>Friend</h3>
</div>
</li>
</ul><!-- ei-slider-large -->
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
<li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
<li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
<li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
<li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
</ul><!-- ei-slider-thumbs -->
</div><!-- ei-slider -->

</div><!-- wrapper -->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>

Leandro Figueiredo
October 22, 2013, 12:16 PM
Hello Viktor,

The source in .zip

tympanus.net/Tutorials/ElasticSlideshow/ElasticSlideshow.zip

Thanks