• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

BC Gallery App (bxSlider gallery) will not work with a page template applied!

New Here ,
Mar 23, 2015 Mar 23, 2015

Copy link to clipboard

Copied

Trying to incorporate the bxSlider, which the BC app "BC Gallery" is based on. (bxslider.com) and using it in conjunction with the BC Web App - to add the images and classify the images. All of it works properly as shown below.

HOWEVER... I built a template page in Muse. Then I selected my gallery page to use the template page. Once I do, the gallery quits functioning and puts the images in a list format down the page - with all images viewable.

I know it has something to do with the jquery. If I remove the Jquery from the head (without the template applied), the result is the same - images listed down the page and the gallery function doesn't work.

When I apply the page template, I get the error that the .ready(function) js isn't a functional script. (the part in bold below)

SCREEN CAPS show how it looks without the template applied and WITH the template applied to the page.

Anyone done this before... and live to tell the tales?

<!DOCTYPE html>

<html>

    <head>

        <title>My Custom Image Gallery</title>

        <meta name="description" />

        <!-- bxSlider CSS file -->

        <link rel="stylesheet" href="/lib/jquery.bxslider.css" />

        <!-- jQuery library (served from Google) -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <!-- bxSlider Javascript file -->

        <script src="/js/jquery.bxslider.js"></script>

        <script src="/js/jquery.bxslider.min.js"></script>

        <script>

$(document).ready(function(){

$('.bxslider').bxSlider({

        mode: 'fade'

});

});

        </script>

    </head>

    <body>

        <div class="bx-wrapper">

        <ul class="bxslider">

            {module_webapps id="29027" filter="all"}

        </ul>

        </div>

    </body>

</html>

Screen Shot 2015-03-23 at 12.00.31 PM.png

Screen Shot 2015-03-23 at 12.01.10 PM.png

TOPICS
How to

Views

285

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines