Slideshows have been the hot new fad on blogs lately. Many blogs have them on the sidebar, in the header and within the post content itself. They are a great way to add a lot of images to a single post without making readers scroll and scroll to the bottom of the page. They also can help loading time since they only pull one image at a time. If the images are clickable you can also use sliders as a way of rounding up your old content.. almost like a fancy ‘navigation’ tool.
About this slide show:
This slideshow (You can see this quick demo I put together in this post) uses jQuery just like the two pagination posts (easy pagination, custom pagination) I shared before. What is nice is that it's all contained under ONE URL which means it's just like a regular post for SEO purposes since all the content is on one page. (Some slide shows generate URLs with a number on the end of the URL, which isn’t ideal.) Also.. ALL the images shown in the slide show are pinnable on Pinterest and you can even optimize the alt text and image title!
For this slider, there is no code to ‘refresh’ the page every time a new image loads. This means it will load faster, it won’t have a long lag or cause your readers to have to sit through your entire template reloading for every.single.image. It also means you won’t be sucking up data usage for readers on mobile. A caveat of this user-friendly function is: this tutorial is NOT going to be a sneaky way to increase your page views. Why don't I want to get those 'free' pageviews?
Market research has shown that for every page refresh a reader has to sit though, the chances of them sticking around drops DRAMATICALLY. And a reader you are forcing off your blog is probably one who won’t be back.
For every 1 second delay in page loading, you lose 7% of your readers..and more than 40% of people abandon a website that takes more than 3 seconds to load.
Most sliders take at least that long.. especially on mobile.
When it comes to you blog I believe that USER EXPERIENCE should be a priority, and so I want to my blog as enjoyable and beneficial for my readers as possible. For me personally it isn't worth driving away 40% of your readers for that extra $00.001 in ad revenue.
How to install the slider:
Because this is jQuery, you once again need to check that you have the library installed in your code.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