SimpleBlog slide show

Jan 14, 2014 at 4:24 PM
Edited Jan 14, 2014 at 6:40 PM
I would like to have a few photos in a slide show in the simpleblog theme here where the first hiking photo is located. Thanks for any help you may give me.
Jan 14, 2014 at 6:40 PM
I am trying to implement NivoSlider on the front page of sahcinfo.org, I seem to have it installed ok but the images do not appear. The edit is there when logged in, anyone offer any help? Thanks
Jan 14, 2014 at 6:51 PM
Edited Jan 14, 2014 at 6:53 PM
Jerry,

Might just have been me, but I was getting memory leak with Nivo JavaScript.
I was wanting an accessible responsive slider so ended up writing my own, can pass that on to you(has a few effect options as well).

You can also use the small script you had on your last theme to tide you over, just drop it on page in HTML view.
<p>
<script type="text/javascript">// <![CDATA[
function slideSwitch() {
            var $active = $('#slideshow img.active');
            if ($active.length == 0) {
                $active = $('#slideshow img:last');
            }            
            var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
            $active.addClass('last-active');

            $next.css({ opacity: 0.0 }).addClass('active').animate({ opacity: 1.0 }, 1500,
                function () {
                    $active.removeClass('active last-active');                    
                });
        }

        $(document).ready(function(){
            setInterval(slideSwitch, 4000);           
        });
// ]]></script>
</p>
<div id="slideshow"><img class="active" src="/themes/SimpleBlog/img/ginko.jpg" alt="Pool through reeds" width="799" height="284" /> <img src="/themes/SimpleBlog/img/image2.jpg" alt="description 2" width="799" height="284" /> <img src="/themes/SimpleBlog/img/image3.jpg" alt="description 3" width="799" height="284" /> <img src="/themes/SimpleBlog/img/image4.jpg" alt="description 4" width="799" height="284" /></div>
<p>This is an example page.</p>
<p>&nbsp;For more information about pages and how to use them,&nbsp;visit the <a href="http://blogengine.codeplex.com/documentation">BlogEngine.NET wiki</a>.</p>
Then add CSS to your theme.
#slideshow {
    position:relative;      
    height:284px;
}

#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow img.active {
    z-index:10;
    opacity:1.0;
}

#slideshow img.last-active {
    z-index:9;
}
Then images to theme img folder.
Jan 14, 2014 at 6:54 PM
Thanks Andy, will this only work on the front page and not every page? I only need it on the front page.
Jan 14, 2014 at 6:58 PM
Just the page you put it in, copy and paste as is into the BE page(HTML view) you are using for front(changing image names to suit).
Jan 14, 2014 at 7:22 PM
Works great Andy, thanks for your help.
Feb 4, 2014 at 4:48 PM
Great job, Andy!

Please let me add that everything works on the desktop but for the mobile, I had to change the "position:absolute;" to "position:relative;".

Without the change, the images would be displayed one below the other instead of one top of each other on the mobile device.

Also note that this code works with the tiny_mce_4_0_15. Very encouraging!

Now, if someone can show me how to single step javascript that would be great. I'm on Visual Studio 2013 Express with IE, Firefox and Chrome.
Feb 4, 2014 at 11:21 PM
Hi galagerardo,

Can't remember now where that script came from, ideal if you just need simple and lightweight slideshow. Never noticed the issue with mobile - nicely fixed. I'm using something different now that's still lightweight, but might be more useful, depending on your requirements. It's a responsive keyboard/screen reader friendly slideshow with controls and effect options(shows as list with JavaScript disabled). I'm using it in four places on my homepage, each with different options applied, try tabbing through. You are welcome to files if you like.

On another note, how are you finding TinyMCE ver 4?
I recently downloaded the latest version and tried it out in local version of BE, quite impressed.
Feb 5, 2014 at 12:52 AM
Hi Andy!

tinymce_4_0_15 integrated well with BlogEngine 2.8. No issues.

Nice slider on your web site. :)
Feb 5, 2014 at 11:50 PM
Hi Andy!

Your slider (under Opinion) looks great on the desktop!

FYI: But unfortunately, the hover functionality is broken on the smart phone. You might want to look at that. Thanks!
Feb 6, 2014 at 1:53 PM
Thanks, feedback appreciated.
The hover functionality, is that the slide up overlay?
Feb 6, 2014 at 4:10 PM
Andy,

On my Windows Phone, I go to your web site, click on Posts menu. The slider functionality does not work because on a mobile device, you don't hover (no mouse).

On my Windows Phone, I go to ABCnews.com, right side almost to the top, there is a slider. That works because the slider has scroll buttons that you can click on and it scroll automatically but slow enough that it is useful. So I'd recommend adding scroll buttons to your slider.

Yes, nowadays, you not only have to test your site on different browsers but you have to also test them on different smart phones and tablets.
Feb 6, 2014 at 5:55 PM
Thanks for clarifying.
The post lists work off CSS hover transitions, thought I would see how post lists would look with post previews set up as sliding tiles i.e Post cat, title and image initially visible with post description, author and date sliding up on hover. So yes, as you say it's a hover action, had I liked this I may have figured out something for the mobile(don't intend keeping this), so while there is additional content sliding into view, these are not actually intended to be sliders. The sliders on the front page are different and set up as proper sliders with buttons to cycle content or not(if you just want to rotate some images). The goal being to have something simple that could fit equally well with images and/or content whilst being responsive, lightweight and more crucially, accessible to keyboard and screen readers. Same goes for the main navigation, that will be changing as well(mega menu with images for desktop and probably select for mobile).
Feb 8, 2014 at 5:19 PM
Andy,

I'm looking for an accessible slider.

On your homepage, you say the slider is in 4 positions. I take it that's under featured, opinion, interviews and 'A revolution in television'. I like it, would you mind letting me have a copy of the script to try out. Also, I didn't quite get what was being said about the post menu, the slider I'm interested in is the one on the homepage.

thanks
Feb 9, 2014 at 5:00 PM
Correct.
No sliders under posts, what you see there is simply an overlay that appears on hover to desktop/laptop users giving additional information about current item.
Contact me via CodePlex email and I'll send you the files.
Jun 25, 2014 at 2:37 PM
Andy I am in the process of updating my hiking club website that has been using the slideshow you provided sucessfully to BE 2.9 at this location http://sahcinfo1.sahcinfo.org,
the slide show is not working here, if you get some time could you give it a check, thank you. I was using simpleblog theme for 2.8 and am now using simpleblog29 for the upgrade test site.

Jerry
Jun 25, 2014 at 4:52 PM
Hi Jerry,

Looks like maybe the CSS is missing from the new theme stylesheet.
Double check the CSS rules stated near the start of this thread have been added.

Cheers.