Announcement

Collapse
No announcement yet.

Adding image slider bxSlider - Javascript and JQuery issues

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Adding image slider bxSlider - Javascript and JQuery issues

    Hello All
    this has me stumped.
    First thing to mention is I know nothing about Javascript / JQuery, so I'm working blind really.
    I'm trying to install an image slider on the Home page and I chose bxSlider as it seems to be very popular.
    I've started with three images - in Sellerdeck and on the site, the images appear one above the other, rather than as a slide.

    I have followed the instructions from bxSlider, but they assume some knowledge, so I could be making errors right from the start!
    http://bxslider.com/

    Sellerdeck gives the page error:
    "A Javascript error has been found on the page (Object doesn't support this property or method)"
    The error is listed twice.

    It's a test domain, but everything works 100%, apart from some missing pages.

    If someone can give me an idea of what I'm doing wrong, I'd be very grateful.

    Norman's Tabber and Accordion both function correctly.

    http://www.calamander2.co.uk/index.html

    Cheers
    Sean


    Here's what I have in the Standard Brochure Page Bulk

    HTML Code:
    <actinic:variable name="BrochureFragmentList" />
<div class="bxslidercontainer">
	<ul class="bxslider" id="bxslider">
		<li><img src="/designimages/multistrada_1200.jpg" /></li>
		<li><img src="/designimages/s1000rr_2012.jpg" /></li>
		<li><img src="/designimages/z1000sx.jpg" /></li>
	</ul>
<script type="text/javascript">
$.noConflict();
$(document).ready(function(){
$('#bx-slider').bxSlider ({
   minSlides: 1,
   maxSlides: 10,
   auto: true,
   pager: false,
   controls: false,
   autoDelay: 500,
   autoHover: true,
   slideWidth: 583
});});
</script>
</div>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22BestSellerListLocation%22%20%2f%3e%20%3d%3d%20%22Home%20Page%20Only%22%29%20OR%20%28%3cactinic%3avariable%20name%3d%22BestSellerListLocation%22%20%2f%3e%20%3d%3d%20%22Both%20Sidebar%20and%20Home%20Page%22%29" >
   <actinic:variable value="Home Page Best Sellers List" name="BestSellersList" />
</actinic:block>

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22NewProductsListLocation%22%20%2f%3e%20%3d%3d%20%22Home%20Page%20Only%22%29%20OR%20%28%3cactinic%3avariable%20name%3d%22NewProductsListLocation%22%20%2f%3e%20%3d%3d%20%22Both%20Sidebar%20and%20Home%20Page%22%29">
	<actinic:variable name="NewProductsList" value="Home Page New Products List" />
</actinic:block>

</actinic:block>
    And here is the <Head>
    HTML Code:
    </title>
<actinic:variable name="BaseHref" />
<actinic:variable name="MetaTags" />
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsP3PPolicyUsed%22%20%2f%3e"><link rel="P3Pv1" href="<actinic:variable name="P3PFullPolicyLink" />"></actinic:block>
<link href="gb_styles.css" rel="stylesheet" type="text/css" media="all" />
<link href="jquery.bxslider.css" rel="stylesheet" />
<link href="actinic.css" rel="stylesheet" type="text/css">
<link href="1External.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="<actinic:variable name="TabberStyle" />" />
<actinic:variable name="JavaScriptFunctions" />
<script type="text/javascript" language="JavaScript1.3" src="tabbeddescriptions.js"></script>
<script type="text/javascript">var GB_ROOT_DIR = "<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e" >.</actinic:block>./";</script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="AJS.js"></script>
<script type="text/javascript" src="AJS_fx.js"></script>
<script type="text/javascript" src="gb_scripts.js"></script>
<script type="text/javascript" src="greyboxwithmultiimagesupport.js"></script>
<script type="text/javascript" src="jquery.bxslider.min.js"></script>
<script type="text/javascript" src="jquery.bxslider.js"></script>
<actinic:variable name="AccordionMenuSetup" />
</head>

    And for completeness, here's the contents of JavaScriptFunctions, which have not been altered at all.
    HTML Code:
       <script language="javascript" type="text/javascript" src="actiniccore.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" /></actinic:block>"></script>
   <script language="javascript" type="text/javascript" src="actinicextras.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" /></actinic:block>"></script>
   <actinic:block if="%3cactinic%3avariable%20name%3d%22RecentlyViewedListIsEnabled%22%20%2f%3e%20%3d%3d%20TRUE" >
			<actinic:variable name="RecentProductsConfiguration" />
	      <script language="javascript" type="text/javascript" src="recentproductssupport.js"></script>
   </actinic:block>

	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Contact%20Us%22" >
      <actinic:variable value="Script for Blocking Unregistered Customers" name="UnregCustomerMessage" if="%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20FALSE" selectable="false" />
   </actinic:block>

   <!-- Placeholder of cookie checking javascript code. Do not remove it! -->
   <Actinic:COOKIECHECK />

   <script language="javascript" type="text/javascript">
      <!-- 
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSSLUsedForEssentialPages%22%20%2f%3e">
		if (document.location.href.match(/#logout$/))
			{
			SetBusinessCookies();
			}
		</actinic:block>
      saveReferrer();
      // -->
   </script>

	<actinic:block if="%28%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27PSP%20Bounce%20Page%27%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsPSPTestMode%22%20%2f%3e%20%3d%3d%20false%29%29" >
		<script language="JavaScript" type="text/javascript">
		<!--
		function onLoad()
		{
		document.formOCC.submit();
		}
		// -->
		</script>
	</actinic:block>
	
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%200%22%20%7c%7c%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Add%20To%20Cart%20Confirmation%22" >
		<actinic:variable name="Javascript Country State Maps" selectable="false" />	
	</actinic:block>
	
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22" >
		<actinic:variable name="JavascriptSectionStockQuery" selectable="false" />
		<script type="text/javascript">
			setCookie('LAST_SECTION_URL', document.location.href);
		</script>
	</actinic:block>
	
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22" >
		<actinic:variable name="JavascriptProductStockQuery" selectable="false" />
		<script type="text/javascript">
			AttachEvent(window, "load", ShowBackLink);
		</script>
	</actinic:block>
	
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22My%20Account%20Page%22%20AND%20%21%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e" >
		<script type="text/javascript">
			if (!IsLoggedIn() && GetScriptPrefix() == 'ma')
				{
				document.location.href = '<actinic:variable name="LoginPageURL" selectable="false" />';
				}
		</script>	
	</actinic:block>
<actinic:variable value="Google Analytics Tracking Code Split SSL" name="GoogleAnalyticsMarkup" selectable="false" />
    Kind Regards
    Sean Williams

    Calamander Ltd
    Tags: None
    #2
    Update

    I finally lost patience with it all and have plumped for a paid solution - WOWSlide.
    Not particularly low cost, but it works out of the box.

    No doubt it will pay for itself in the time saved from faffing about.

    Kind Regards
    Sean Williams

    Calamander Ltd

    Comment

      #3
      BxSlider can be integrated with Sellerdeck but needs some work. I used it as the basis of my "SliderLists" add-on that displays Also Bought, Best Sellers, New Products and Related Products in a slideshow. And also allows up to 10 custom slides to be displayed.

      Demo on http://www.drillpine.biz/v10-bxsliderv1/index.html and a bonkers page on http://www.drillpine.biz/v10-bxslide...g/Cameras.html where it's animating a custom slideshow, New Products, Best Sellers, Also Bought and Related Products all at once.

      The code needed to set it up can be seen if you view source of the page. The CSS file also needed some tweaks.
      Norman - www.drillpine.biz
      Edinburgh, U K / Bitez, Turkey

      Comment

        #4
        Thanks for the reply Norman - I'll take a look
        Kind Regards
        Sean Williams

        Calamander Ltd

        Comment

        Previous template Next
        Working...
        X