Jump to content

Howto: add a banner that rotates pictures ?


motionmindz
 Share

Recommended Posts

For the project I work on right now I choosed bxslider.

Gonna check out owlcarousel now.

(will continue with bxslider for this project don't want to have a multitude of sliders in 1 project )

Thanks Felix, it's looking great.

Edited by Martijn Geerts
Link to comment
Share on other sites

One minor thing to mention about owlcarousel is the lack of circular slides. I prefer carousels which continues after the last slide.

what's realy great about the owlcarousel is the fine-tuning between different screen widths. This could save you a lot of custom JS.

When I'm in a hurry with a project I will consider owlcarousel.

  • Like 1
Link to comment
Share on other sites

One minor thing to mention about owlcarousel is the lack of circular slides. I prefer carousels which continues after the last slide.

what's realy great about the owlcarousel is the fine-tuning between different screen widths. This could save you a lot of custom JS.

When I'm in a hurry with a project I will consider owlcarousel.

Agree. And the second one - it doesn't have built in "lightbox" feature. So, if I don't need to scroll multiple slides, I'll stay on fotorama.

Link to comment
Share on other sites

I cant get Bxslider to work.

I have linked the Jquery and CSS files, ok.

I have put the 'Document.Ready' function call just after the linking of these files in the head.inc of my template

between the <head> tags.

It just clears my complete page and I dont see nothing anymore. When I take the function all out it loads fine again.

I dont understand ?

Link to comment
Share on other sites


<!-- HTML fragment -->

<head>

<link href="/path/to/jquery.bxslider.css" rel="stylesheet" />

<!-- jQuery library (served from Google), or serve your own -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="/path/to/jquery.bxslider.min.js"></script>

<script>

// this is document ready, put this after the jquery

$(function(){

$(".bxslider").bxSlider();

});

</script>

</head>

<body>

<ul class="bxslider">

<li><img src="/images/pic1.jpg" /></li>

<li><img src="/images/pic2.jpg" /></li>

<li><img src="/images/pic3.jpg" /></li>

<li><img src="/images/pic4.jpg" /></li>

</ul>

  • Like 1
Link to comment
Share on other sites

I had it more or less like you have.

Adding line:
    <!-- bxSlider Javascript file -->
    <script type="text/javascript" src="<?php echo $config->urls->templates?>_scripting/JSdownloads/bxslider/jquery.bxslider.min.js></script>

makes my page contents disappear. When I take it out I see my page and the pics load just one below the other, no

sliding or fading.
  

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="<?php echo $page->summary; ?>" />
    <meta name="generator" content="ProcessWire <?php echo $config->version; ?>" />
    <title><?php echo $page->get("headline|title"); ?></title>
    
    <!-- CSS files -->
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>_styling/skyliner.css" />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>_styling/ie.css" />
    <![endif]-->    
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>_scripting/JSdownloads/bxslider/jquery.bxslider.css" />
    
    <!-- main java library -->
    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>
    
    <!-- jQuery library -->
    <script type="text/javascript" src="<?php echo $config->urls->templates?>_scripting/JSjQuerylibs/1.10.2/jquery-1.10.2.min.js"></script>
          
    <!-- bxSlider Javascript file -->
    <script type="text/javascript" src="<?php echo $config->urls->templates?>_scripting/JSdownloads/bxslider/jquery.bxslider.min.js></script>
    
    <script>
    // this  is document ready, put this after the jquery
    $(function(){

      $(".bxslider").bxSlider();

    });
  </script>

</head>

// Test purposes
<div id="lfthead"> <!--linker header--> </div>
<div id="rgthead"> <!--rechter header--> </div>

<body>
<!-- BIGTITLE TEXT PARAGRAPH -->
    <p id='bgtitle'> <?php echo $page->rootParent->title; ?> </p>    
        
<!-- MASTER HEADER -->
    <div id="masthead" class="masthead">
    
    <div class="container">
    
            <ul class="bxslider">
              <li><img src="<?php echo $config->urls->templates?>_images/pic1.jpg" height="42" width="42"/></li>
              <li><img src="<?php echo $config->urls->templates?>_images/pic2.jpg" height="42" width="42"/></li>
              <li><img src="<?php echo $config->urls->templates?>_images/pic3.jpg" height="42" width="42"/></li>
              <li><img src="<?php echo $config->urls->templates?>_images/pic4.jpg" height="42" width="42"/></li>
              <li><img src="<?php echo $config->urls->templates?>_images/pic5.jpg" height="42" width="42"/></li>
            </ul>

Link to comment
Share on other sites

<!-- bxSlider Javascript file --> on that line there is a double quote missing.

what's also weird is the main.js is loaded before jQuery. And the comment is weird, Java has nothing to do with including the script. 

Not necessary, but recommended (for HTML5):

  1. When javascript used with <script> tags no attributes are required (src when linking, duh).
  2. For the <link> tag, only rel & href attributes are required.
Link to comment
Share on other sites

if you include a library like jQuery, it's quite handy that you can use it to.

If the scripts are linked before, you can't use jQuery. And you all have to do it the Javascript only way. 

Styling is done with CSS, I prefer to throw the CSS what comes with it away, but that not recommended :-)

Link to comment
Share on other sites

For debugging, sometimes it is better to set it up first outside processwire. Use an index.html and subdirectories

for the images, css and js. Copy and paste the html example code in the index.html. The bxslider css and js calls

between the <head> tags. The .bxslider call and <ul class="bxslider"> between the <body> tags.

Try different bxslider parameters and wrappers. Once you have everything working correctly in this part then bring it all over into processwire.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Stumbled upon here whilst looking for some sort of Ad Banner Module for Processwire.
Figured I might as well share some of my experiences.

I've used Slick and Owl Carousel before.

Chose Slick as it was recommended by Foundation when they deprecated their Orbit slider.

Slick was nice until I realised the slider arrows didn't look very nice in Mobile and couldn't work out how to readjust or disable it.

There was another visual bug which I can't recall at the moment which lead me to switch to Owl.

Haven't looked back since.
BXSlider looks interesting and perhaps it'll save the day if Owl plays up in the future.

Link to comment
Share on other sites

Look again:  

http://www.jssor.com/     http://www.jssor.com/demos/     (from simple banner to slick sliders and all responsive)

Mauricius gracefully made a module for it:

http://modules.processwire.com/modules/process-slider/

Well when the day comes when I have to look back, I'll certainly give jssor & process slider a serious look.

Thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...