Howto: add a banner that rotates pictures ?

motionmindz · December 6, 2013

Its rather simple I know and I know this kind of thing is already done but where to find this code and how to

incorporate this on the first page?

3fingers · December 6, 2013

Do you mean a slideshow of pictures, an animated gif(gosh...) or a flash content?

pwired · December 6, 2013

but where to find this code and how to incorporate this on the first page?

There are loads of them on google. Just one example: http://bxslider.com/

Also see how to implement code + examples + faq down the page.

3fingers · December 6, 2013

There is a tutorial here in the Wiki that fits exactly what you're looking for,

Martijn Geerts · December 6, 2013

http://bxslider.com/ is the best open source slider I know.

felix · December 6, 2013

http://bxslider.com/ is the best open source slider I know.

You obviously don't know owlcarousel then

Martijn Geerts · December 6, 2013

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 December 6, 2013 by Martijn Geerts

k07n · December 9, 2013

You obviously don't know owlcarousel then

Wow! I'll use it for sure, many thanks for the link!

btw, i'm using fotorama, it's very sexy too.

Martijn Geerts · December 9, 2013

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.

k07n · December 9, 2013

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.

motionmindz · December 9, 2013

Thanks all! Will check out all options.

videokid · December 9, 2013

If you're using foundation, Orbit Slider isn't that bad either... ánd responsive too....

- I.

motionmindz · December 12, 2013

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 ?

Martijn Geerts · December 12, 2013

<head>

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

$(function(){

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

});

</script>

</head>

<body>

</ul>

motionmindz · December 13, 2013

I had it more or less like you have.

Adding line:

<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>

   
   <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>_styling/skyliner.css" />
   
   <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>_scripting/JSdownloads/bxslider/jquery.bxslider.css" />

   
   <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>

   
   <script type="text/javascript" src="<?php echo $config->urls->templates?>_scripting/JSjQuerylibs/1.10.2/jquery-1.10.2.min.js"></script>

   
   <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">  </div>
<div id="rgthead">  </div>

<body>

   <p id='bgtitle'> <?php echo $page->rootParent->title; ?> </p>


   <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>

Martijn Geerts · December 13, 2013

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):

When javascript used with <script> tags no attributes are required (src when linking, duh).
For the <link> tag, only rel & href attributes are required.

motionmindz · December 16, 2013

Adding the missing quote did it, obviously... Why did I not see it?!

Ok, why would it matter much that the main.js is loaded before jQuery. Would that pose problems ?

motionmindz · December 16, 2013

How to position the bxslider in my page, do I set it in the bxslider CSS ?

And the bxslider does not autorotate the pictures it seems. Any idea why ?

Martijn Geerts · December 16, 2013

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

motionmindz · December 16, 2013

I havent figured out how to position the slider, but I see that the pics - while a lot bigger actually - are displayed very tiny in the slider.

Cant be that these are the default settings ?

Will check also Owl carousel and other options..

pwired · December 16, 2013

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.

FrancisChung · November 16, 2015

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.

pwired · November 16, 2015

Haven't looked back since.

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/

FrancisChung · November 17, 2015

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.

Sign In

Howto: add a banner that rotates pictures ?

Recommended Posts

motionmindz

3fingers

pwired

3fingers

Martijn Geerts

felix

Martijn Geerts

k07n

Martijn Geerts

k07n

motionmindz

videokid

motionmindz

Martijn Geerts

motionmindz

Martijn Geerts

motionmindz

motionmindz

Martijn Geerts

motionmindz

pwired

FrancisChung

pwired

FrancisChung

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details