How to install the slider:
The first thing you need to do is make sure you have jQuery installed in your template. The easiest way to check for that is to go to your template HTML and search for "jquery.min.js”
(If you haven’t played with your html before it is no big deal. From your Dashboard go to TEMPLATE (and of course BACK UP YOUR TEMPLATE first), and then click on “Edit HTML” Use your mouse to click INSIDE that box of code (try highlighting some text) and then hit “Control-F” to bring up the search box. Now you can look for anything in your template code that you need. Either “jquery.min.js” or “</head>" etc)
if you don't find a jquery library, you need to paste:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>right before </head> in your template. You don’t want multiple libraries.. so make sure you check before adding it again!
(Again, just search for “</head” as I explained above and then click the line above it and paste in the code)
Styling the slider:
Next we want to add the styling (for the box and the buttons etc) to your code. This has been pre-assigned by the script author **(Steven Wanderski). We do this by pasting:<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />right before </head> in your template.
Next you want to add the CSS styling that YOU control. To do this paste the following
.bxslider img{right before ]]></b:skin>
width:100%;
height:300px;
}
.bx-wrapper img {
display: inline !important;
}
you can change the width and height of the slider in that code if you need to.
Activating the slider:
In order for the slider to actually slide upon clicking, you need to add the jQuery script to your template. To do this you need to paste:<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>Right before </head>(you are probably getting good at this by now!)
<script>
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
captions: true
});
});
</script>
You do have a little control over how the slider works with this code:
“auto: true” means the slider slides automatically. If you make that false, the arrow needs to be clicked to rotate.
“autoControls: true” means that the forward and back arrows show, you can removing them by setting that to false
“captions: true” turn on and off the text box at the bottom (if your image speaks for itself, you can set that to false)
Adding content to the slider:
Now you have your slider ready to go but you have to load it with images and captions. (Once you have that other code installed, you can add as many sliders as you want to your site!)To do this you need to paste the following HTML into your post (or even in a widget if you want to use it on your home page or sidebar)
<ul class="bxslider">You will need to paste your image url (don’t forget the http://) and your image caption where it is indicated above.
<li><img src="ImageURL1" title='CaptionGoesHere' /></li>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>
If you want to have embed the slider within the content of a post, you can compose the post as normal ABOVE the starting "<ul class" and continue it below the closing "</ul>” When someone clicks through the images, any text outside of the slider will not change.
Making Images Clickable (And adding alt text for SEO and Pinterest):
If you want to make the image clickable you need to add the link to your image code like this:<li><a href=“OUTGOING LINK"><img src=“IMAGE URL” title=“CAPTION GOES HERE" alt=“ALT TEXT GOES HERE" /></a></li>The Image caption is automatically your image title (for Pinterest), but you will notice I added alt text to the end of the code as well. (Why this is important).
I actually found the EASIEST way to do create all of this code is to import my image to the post (like you normally would if you were inserting any image), click on properties and add the alt text, and title text (remember this will be the caption!). Next, click the image and then the link icon (twice) to add the destination URL for that image.
Now toggle to the HTML window and copy the code and paste you just created for that image in-between the <li> and </li> above.
Because the image title is used for the image caption, it is not possible to make the text clickable.
And here it is IN ACTION (in this case I took off the captions):
**For advanced CSS-users only:
For those of you who want to mess with the CSS and not use the stylesheet, here is the full CSS for the slider./*** BxSlider v4.1.2 - Fully loaded, responsive content slider* http://bxslider.com** Written by: Steven Wanderski, 2014* http://stevenwanderski.com* (while drinking Belgian ales and listening to jazz)** CEO and founder of bxCreative, LTD* http://bxcreative.com*//** RESET AND LAYOUT===================================*/.bx-wrapper {position: relative;margin: 0 auto 60px;padding: 0;*zoom: 1;}.bx-wrapper img {max-width: 100%;display: block;}/** THEME===================================*/.bx-wrapper .bx-viewport {-moz-box-shadow: 0 0 5px #ccc;-webkit-box-shadow: 0 0 5px #ccc;box-shadow: 0 0 5px #ccc;border: 5px solid #fff;left: -5px;background: #fff;/*fix other elements on the page moving (on Chrome)*/-webkit-transform: translatez(0);-moz-transform: translatez(0);-ms-transform: translatez(0);-o-transform: translatez(0);transform: translatez(0);}.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto {position: absolute;bottom: -30px;width: 100%;}/* LOADER */.bx-wrapper .bx-loading {min-height: 50px;background: url(images/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}/* PAGER */.bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-family: Arial;font-weight: bold;color: #666;padding-top: 20px;}.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}.bx-wrapper .bx-pager.bx-default-pager a {background: #666;text-indent: -9999px;display: block;width: 10px;height: 10px;margin: 0 5px;outline: 0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active {background: #000;}/* DIRECTION CONTROLS (NEXT / PREV) */.bx-wrapper .bx-prev {left: 10px;background: url(images/controls.png) no-repeat 0 -32px;}.bx-wrapper .bx-next {right: 10px;background: url(images/controls.png) no-repeat -43px -32px;}.bx-wrapper .bx-prev:hover {background-position: 0 0;}.bx-wrapper .bx-next:hover {background-position: -43px 0;}.bx-wrapper .bx-controls-direction a {position: absolute;top: 50%;margin-top: -16px;outline: 0;width: 32px;height: 32px;text-indent: -9999px;z-index: 9999;}.bx-wrapper .bx-controls-direction a.disabled {display: none;}/* AUTO CONTROLS (START / STOP) */.bx-wrapper .bx-controls-auto {text-align: center;}.bx-wrapper .bx-controls-auto .bx-start {display: block;text-indent: -9999px;width: 10px;height: 11px;outline: 0;background: url(images/controls.png) -86px -11px no-repeat;margin: 0 3px;}.bx-wrapper .bx-controls-auto .bx-start:hover,.bx-wrapper .bx-controls-auto .bx-start.active {background-position: -86px 0;}.bx-wrapper .bx-controls-auto .bx-stop {display: block;text-indent: -9999px;width: 9px;height: 11px;outline: 0;background: url(images/controls.png) -86px -44px no-repeat;margin: 0 3px;}.bx-wrapper .bx-controls-auto .bx-stop:hover,.bx-wrapper .bx-controls-auto .bx-stop.active {background-position: -86px -33px;}/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {text-align: left;width: 80%;}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {right: 0;width: 35px;}/* IMAGE CAPTIONS */.bx-wrapper .bx-caption {position: absolute;bottom: 0;left: 0;background: #666\9;background: rgba(80, 80, 80, 0.75);width: 100%;}.bx-wrapper .bx-caption span {color: #fff;font-family: Arial;display: block;font-size: .85em;padding: 10px;}
No comments:
Post a Comment