MyBB Community Forums

Full Version: Flexslider won't work...
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I have the script tags in the header, everything is connected and headed towards the correct file, paths are correct, jquery is imported, image paths are imported but alas, it doesn't work...


Header include:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.flexslider.js"></script>
{$stylesheets}
<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
<script type="text/javascript">
jQuery.noConflict();
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>
{$newpmmsg}

Portal code (where the slider is):

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="images/climages/slider/slide1.jpg" />
    </li>
    <li>
      <img src="images/climages/slider/slide1.jpg" />    
    </li>
    <li>
      <img src="images/climages/slider/slide1.jpg" />    
    </li>
  </ul>
</div>
{$footer}
</body>
</html>

you may need to look closely but it's just showing the .flexslider class:

[Image: e546ef2dd7486b8e5bf16460f9d24ce6.png?1363622228]
Might be a conflict.

Change this:

<script type="text/javascript">
jQuery.noConflict();
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

To this:

<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

Or this:

<script type="text/javascript">
jQuery.noConflict($);
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

Also, add this:
<script type="text/javascript">jQuery.noConflict();</script>

Just after this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Worked! Smile Thanks so much.