Hi,
I have a flexslider there shows images from gallery field and i works perfect.
But the javascript to the slider ruin all the other javascript functions on the page where the slider is, are there someone there who has an idea for a solution.
The code:
<?php
$images = get_field('gallery');
if( $images ): ?>
<div id="slider" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
Thank you
//Asger
Hello Asger,
functions is the best place to call all scripts(javascripts) and styles.
Syntax highlighting is not necessary in real life project.
The code below is enough to make flexslider work.
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
});
});
</script>
Please, make sure that you have added call to flexslider.css and place flexslider’s font in proper place as well.
Hello Rajat,
thanks for your reply
I have solved my problem with the help from this video –> https://www.youtube.com/watch?v=voOQDohL4Pc
//Asger
