How-to : How to add BXSlider to a Xoops Side Block

Posted by john on 2011/7/30 13:30:00 (12819 reads)
In this article I will show you how to add the BXSlider into a Xoops Block.
I have done all the work so you don't have to.

The first thing you should do is read about BXSlider at their website http://bxslider.com.
I really like Led Zeppelin so that may be why I chose BXSlider.



Once you have been to their website and you want to add it to your Xoops Based Website here is what you need to do.

There are 1 or 2 lines you need to add to your themes " theme.html " file

This is very important to do carefully.
Look in your theme.html file and see if there is any line that looks similar to this"

<script type="text/javascript" src="<{xoAppUrl jquery/js/jquery.js}>"></script>

anything that ends with

"jquery.js"

best way is to search your theme.html for jquery

If you do not already include jquery you can add the lines below somewhere before

<!-- customized header contents -->
<{$xoops_module_header}>


which is before the </head> tag of your theme.

<{php}>
/** add JQuery */
global $xoTheme;
$xoTheme->addScript("browse.php?Frameworks/jquery/jquery.js");
$this->assign('xoops_module_header', $xoTheme->renderMetas(null, true));
<{/php}>

This will include jquery in your theme the right way for Xoops, so it doesn't get added more than once.


Then you will need to copy this line just before the </head> tag

<link rel="stylesheet" type="text/css" media="screen" href="<{xoAppUrl jquery/css/bx_styles.css}>"/>

VERY IMPORTANT
To be Xhtml compliant this line MUST go in the theme.html file and NOT in the block.

Save your theme.html file, this part is done



O.K. Now go to your sites Blocks Administration
Go to add a block.
add this code in the content field:


<script type="text/javascript" src="{X_SITEURL}jquery/js/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="{X_SITEURL}jquery/js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#slider1").bxSlider({
mode: 'fade',
auto: true,
autoHover: true,
pager: false,
pause: 6000,
controls:false
});
});

</script>
<ul id="slider1">
<li>
<img src="{X_SITEURL}jquery/images/jobs.png" width="98%" height="30%" alt="Jobs Module" />
<div class="bxcontent">
<h4>Jobs Module</h4>
<p>for Xoops Powered<br />Websites</p>
<p><a href="{X_SITEURL}modules/jobs/">See a Sample</a></p>
<p><a href="{X_SITEURL}modules/mydownloads/viewcat.php?cid=5">Download Now</a></p>
</div>
</li>
<li>
<img src="{X_SITEURL}jquery/images/alumni.png" width="98%" height="30%" alt="Alumni Module" />
<div class="bxcontent">
<h4>Alumni Module</h4>
<p>for Xoops Powered<br />Websites</p>
<p><a href="{X_SITEURL}modules/alumni/">See a Sample</a></p>
<p><a href="{X_SITEURL}modules/mydownloads/viewcat.php?cid=6">Download Now</a></p>
</div>
</li>
<li>
<img src="{X_SITEURL}jquery/images/classifieds.png" width="98%" height="30%" alt="Classifieds Module" />
<div class="bxcontent">
<h4>Classifieds Module</h4>
<p>for Xoops Powered<br />Websites</p>
<p><a href="{X_SITEURL}modules/classifieds/">See a Sample</a></p>
<p><a href="{X_SITEURL}modules/mydownloads/viewcat.php?cid=12">Download Now</a></p>
</div>
</li>
<li>
<img src="{X_SITEURL}jquery/images/work.png" width="98%" height="30%" alt="Custom Work" />
<div class="bxcontent">
<p>To one of my modules
<br />To another module
<br />To a theme
<br />Add JQuery
<br />
<br />Tell me what you want
<br />
I can do it</p>
</div>
</li>
</ul>
<div class="clear"></div>


Choose left or right side block
Set the content type to HTML
Save the block.
O.K. Now we need to add the css files and jquery files.

Download the zip package below unpack it, and it will have a folder called jquery, upload that folder and it's contents to your Xoops root directory.

Download Here

That should do it. You may need to make minor adjustments to the css file depending on your theme.

Like I said before this is not my slider. It is BXSlider, I just added it to a Xoops block.

To add your own photos just add them to the jquery/images folder in the download and rename the image source in my code above.

Ex. "{X_SITEURL}jquery/images/alumni.png" width="98%" height="30%" alt="Alumni Module"

Change alumni.png with your image name.
Change "Alumni Module"
You may need to change the height depending on your theme and your photos.
You can always use the exact size of the photos, "Ex. 150px".
All photos should be the same size.


If this helps you out please remember the donation button.


I will add the code for a center block next week.

Thank You,

John


Tags: block   jquery   xoops  
Printer Friendly Page Send this Story to a Friend Create a PDF from the article
The comments are owned by the author. We aren't responsible for their content.
Author Thread
Login
Username:

Password:

Remember me



Lost Password?

Register now!
 
Main Menu
 
Who's Online
1 user(s) are online (1 user(s) are browsing News)

Members: 0
Guests: 1

more...
 
Donat-O-Meter
Make donations with PayPal!
Stats
Goal: $25.00
Due Date: Jun 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $25.00