Integrate BXSlider in MURA CMS 6.2x

Post Reply
User avatar
dedwards
Site Admin
Posts: 69
Joined: Wed Mar 15, 2006 8:28 pm
Contact:

Integrate BXSlider in MURA CMS 6.2x

Post by dedwards » Thu Aug 18, 2016 12:49 pm

1. Download bxslider from http://www.bxslider.com

2. Extract the file on your computer.

3. In your CMS installation, create a directory named "bxslider" under the "/default/js/" directory. Browse to the location of the extracted files and copy "jquery.bxslider.min.js" to you MURA CMS installation "/default/js/bxslider" directory you just created.

4. In your CMS installation, create a directory named "bxslider" under the "/default/css/" directory. Browse to the location of the extracted files and copy "jquery.bxslider.css" and the "images" directory to you MURA CMS installation "/default/css/bxslider" directory you just created.

5. Login to your MURA CMS admin and go to "Modules --> Components" and click on "Add Component". Ensure the Type is set to "Component", enter a meaningful name under "Title" ex: Bxslider and under the "Content" section, click on the "Source" button and paste the code below, ensure that at least the "Site Manager" is checked under the "Where would you like to use this Component" and click "Publish":

Code: Select all

<cfoutput> 
<script src="/default/jquery/jquery.min.js"></script>
<script src="/default/js/bxslider/jquery.bxslider.min.js">
</script>
<link href="/default/css/bxslider/jquery.bxslider.css" rel="stylesheet" />
<div id="bx-wrapper">
<ul class="bxslider">
<li><a href="##"><img alt="" height="400" src="/default/assets/Image/pic1.png" title="Test" width="1920" /></a></li>
<li><a href="##"><img alt="" height="400" src="/default/assets/Image/pic2.png" title="Test" width="1920" /></a></li>
<li><a href="##"><img alt="" height="400" src="/default/assets/Image/pic3.png" title="Test" width="1920" /></a></li>
</ul>
</div>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
     auto: true, 
     captions: false,
     slideWidth: 1920,
     tickerHover: true,
     adaptiveHeight: true,
     useCSS: false
  });
});
</script> 
</cfoutput>
6. After publishing, go back and edit the component. You can either upload the pics by double-clicking on the missing picture holder, click "Browse Server" and either "Upload" or select an existing picture from your server. Alternatively, you can edit the source code directly. Ensure you setup the links for each picture as needed. TIP: I found the best width for pics is 1920 pixels. Of course, adjust to your needs.

7. Now, in your CMS installation in the "/default/includes/themes/your_theme/templates" directory (where "your_theme" reflects the actual name of the theme you are using in your MURA instance) select and edit the page you want the Bxslider to load (usually home.cfm) and enter the code below ensuring that the "Component Name" in the code below reflects the exact title of the component you created in step 5:

Code: Select all

#$.dspObject('component','Component Name')#
If everything went right, you should be able to see bxslider load with the slideshow of your pics.
Post Reply