Giter VIP home page Giter VIP logo

ftw.slider's Introduction

Introduction

This product let you create a simple slideshow, using slick.

In each slider-pane you can define:

  • An image
  • HTML text
  • A link

Installation

  • Add ftw.slider to your buildout configuration:
[instance]
eggs +=
    ftw.slider
  • Run bin/buildout
  • Install the generic import profile.

Upgrade from 2.4.x to 3.0.x

The ftw.contentpage ListingBlock integration has been removed with the 3.0.0 release. If you are at this point, please consider upgrading your ftw.contentpage installation to ftw.simplelaoyut. With ftw.simpelayout you can install ftw.sliderblock to get the same feature set.

Compatibility

Runs with Plone 4.3 and 5.1.

How to use ftw.slider

If you want to display a slideshow on your content, just create a ftw.slider.Container and add some ftw.slider.Pane.

There is a viewlet which checks your content for a slider-container and displays its containing panes.

Settings

To ensure access4all you can use the settings canNext which is the option for en/disabling the slider button to move to the next image (when set true the button is shown, when false it is hidden), canPrev equivalent for the last image button and the arrowsOnHover option (when true only showing the buttons on hover, when false showing them always).

Other settings are autoplay (when true automatically sliding to the next image after set time) and autoplaySpeed (a number for the time to wait until sliding to the next image in milliseconds).

Those options are to be set in json format in the configuration textarea of the ftw.slider block like:

{"canNext":true, "canPrev":true, "arrowsOnHover":false}

Extended Slick configuration

In addition to the default slick-configuration options you can use the following ftw.slider specific custom options

Random

Shuffles the slides on each page reload to display the slides in a random order.

{"random": true}

Screenshots

Using ftw.slider with default plone:

image

The slideshow is responsive (here OneGovBox as example):

image

Links

Copyright

This package is copyright by 4teamwork.

ftw.slider is licensed under GNU General Public License, version 2.

ftw.slider's People

Contributors

bierik avatar buchi avatar deiferni avatar elioschmutz avatar jone avatar lukasgraf avatar maethu avatar mbaechtold avatar nachtalb avatar ninfaj avatar phgross avatar tinagerber avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ftw.slider's Issues

Don't use scss vars from a specific theme.

The variable $font-family-heading i used by this package.
Please move the variable to ftw.theming.

Also consider the dependency hell you're going into. Try not break our other installations (which have those package from source).

Plone 5.1.6: ftw.slider 3.4.5 breaks insert link

Plone 5.1.6 (5116)
CMF 2.2.13
Zope 2.13.29
Python 2.7.13 (default, Aug 22 2020, 10:03:02) [GCC 6.3.0 20170516]
PIL 6.1.0 (Pillow)
Theme Barceloneta

1.- Create a new Plone site.
2.- Test link insertion: works fine.
3.- Activate ftw.slider 3.4.5.
4.- Test link insertion: does not work (the link insertion window does not open).

After activate ftw.slider, the following appears on /@@manage-upgrades:
collective.js.jqueryui:default [This profile's filesystem version is lower than one of the upgrades' target version. Please update the corresponding metadata.xml!] Filesystem: 3203, Database: 3204
[This upgrade is already installed.] [This upgrade's target version is higher than the profile's filesystem version. Please update the corresponding metadata.xml!] all → 3204 Common upgrade

Upgrading collective.js.jqueryui from 2.0.1 to 2.1.1 (Filesystem: 3204, Database: 3204 ), does not fix the problem: link insertion still not working.

Any idea?

Thanks!

Problem with slider in Chrome

You have to set something like:

.sliderPane { height: 500px; }

Otherwise Google Chrome starts with the last pane and continues with the second...
Maybe we should define a size for the slider images.

Will you eventually support this product in Plone 5?

Was just wondering if you had intentions of continuing this product forward into Plone 5. We started using it as it is responsive and relatively lightweight, but it currently doesn't work on Plone 5. Obviously it is early days for Plone 5 yet but would be nice to know if this product will be updated for it or if we should start looking for something else.

ftw.slider Bug

Der "ftw.slider" im Zusammenhang mit dem OneGov-Theme scheint nicht zu funktionieren. Anbei der Traceback der bei "Hinzufügen -> Slider Bild" auftritt:

Traceback (innermost last):
Module ZPublisher.Publish, line 138, in publish
Module ZPublisher.mapply, line 77, in mapply
Module ZPublisher.Publish, line 48, in call_object
Module plone.z3cform.layout, line 66, in call
Module plone.z3cform.layout, line 60, in update
Module z3c.form.form, line 263, in render
Module z3c.form.form, line 158, in render
Module zope.browserpage.viewpagetemplatefile, line 51, in call
Module zope.pagetemplate.pagetemplate, line 132, in pt_render
Module zope.pagetemplate.pagetemplate, line 240, in call
Module zope.tal.talinterpreter, line 271, in call
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 888, in do_useMacro
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 533, in do_optTag_tal
Module zope.tal.talinterpreter, line 518, in do_optTag
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 954, in do_defineSlot
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 533, in do_optTag_tal
Module zope.tal.talinterpreter, line 518, in do_optTag
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 858, in do_defineMacro
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 533, in do_optTag_tal
Module zope.tal.talinterpreter, line 518, in do_optTag
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 531, in do_optTag_tal
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 858, in do_defineMacro
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 533, in do_optTag_tal
Module zope.tal.talinterpreter, line 518, in do_optTag
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 821, in do_loop_tal
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 533, in do_optTag_tal
Module zope.tal.talinterpreter, line 518, in do_optTag
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 954, in do_defineSlot
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 533, in do_optTag_tal
Module zope.tal.talinterpreter, line 518, in do_optTag
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 858, in do_defineMacro
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 533, in do_optTag_tal
Module zope.tal.talinterpreter, line 518, in do_optTag
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 531, in do_optTag_tal
Module zope.tal.talinterpreter, line 513, in no_tag
Module zope.tal.talinterpreter, line 343, in interpret
Module zope.tal.talinterpreter, line 742, in do_insertStructure_tal
Module zope.tales.tales, line 696, in evaluate

  • URL: /home/user/eggs/plone.app.z3cform-0.7.6-py2.7.egg/plone/app/z3cform/templates/macros.pt
  • Line 97, Column 46
  • Expression: <PathExpr standard:u'widget/@@ploneform-render-widget'>
  • Names:
    {'args': (),
    'context': <Container at /gov/slider>,
    'default': <object object at 0xb77217e8>,
    'loop': {},
    'nothing': None,
    'options': {},
    'repeat': {},
    'request': <HTTPRequest, URL=http://localhost:8984/gov/slider/++add++ftw.slider.Pane>,
    'template': <zope.browserpage.viewpagetemplatefile.ViewPageTemplateFile object at 0xc63a70c>,
    'view': <plone.dexterity.browser.add.DefaultAddForm object at 0xb5081cac>,
    'views': <zope.browserpage.viewpagetemplatefile.ViewMapper object at 0xb3c994ec>}
    Module zope.tales.expressions, line 217, in call
    Module Products.PageTemplates.Expressions, line 155, in _eval
    Module Products.PageTemplates.Expressions, line 117, in render
    Module Products.Five.browser.metaconfigure, line 479, in call
    Module zope.browserpage.viewpagetemplatefile, line 83, in call
    Module zope.browserpage.viewpagetemplatefile, line 51, in call
    Module zope.pagetemplate.pagetemplate, line 132, in pt_render
    Module zope.pagetemplate.pagetemplate, line 240, in call
    Module zope.tal.talinterpreter, line 271, in call
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 858, in do_defineMacro
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 954, in do_defineSlot
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 531, in do_optTag_tal
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 742, in do_insertStructure_tal
    Module zope.tales.tales, line 696, in evaluate
  • URL: /home/user/eggs/plone.app.z3cform-0.7.6-py2.7.egg/plone/app/z3cform/templates/widget.pt
  • Line 37, Column 4
  • Expression: <PathExpr standard:u'widget/render'>
  • Names:
    {'args': (),
    'context': <ContentTreeWidget 'form.widgets.link'>,
    'default': <object object at 0xb77217e8>,
    'loop': {},
    'nothing': None,
    'options': {},
    'repeat': {},
    'request': <HTTPRequest, URL=http://localhost:8984/gov/slider/++add++ftw.slider.Pane>,
    'template': <zope.browserpage.viewpagetemplatefile.ViewPageTemplateFile object at 0xbc70e2c>,
    'view': <Products.Five.metaclass.RenderWidget object at 0xb5188d4c>,
    'views': <zope.browserpage.viewpagetemplatefile.ViewMapper object at 0xb57c466c>}
    Module zope.tales.expressions, line 217, in call
    Module zope.tales.expressions, line 211, in _eval
    Module plone.formwidget.contenttree.widget, line 168, in render
    Module zope.browserpage.viewpagetemplatefile, line 83, in call
    Module zope.browserpage.viewpagetemplatefile, line 51, in call
    Module zope.pagetemplate.pagetemplate, line 132, in pt_render
    Module zope.pagetemplate.pagetemplate, line 240, in call
    Module zope.tal.talinterpreter, line 271, in call
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 742, in do_insertStructure_tal
    Module zope.tales.tales, line 696, in evaluate
  • URL: /home/user/eggs/plone.formwidget.contenttree-1.0.7-py2.7.egg/plone/formwidget/contenttree/input.pt
  • Line 3, Column 5
  • Expression: <PathExpr standard:u'view/renderQueryWidget'>
  • Names:
    {'args': (<ContentTreeWidget 'form.widgets.link'>,),
    'context': <Container at /gov/slider>,
    'default': <object object at 0xb77217e8>,
    'loop': {},
    'nothing': None,
    'options': {},
    'repeat': {},
    'request': <HTTPRequest, URL=http://localhost:8984/gov/slider/++add++ftw.slider.Pane>,
    'template': <zope.browserpage.viewpagetemplatefile.ViewPageTemplateFile object at 0xbae256c>,
    'view': <ContentTreeWidget 'form.widgets.link'>,
    'views': <zope.browserpage.viewpagetemplatefile.ViewMapper object at 0xb3cadd2c>}
    Module zope.tales.expressions, line 217, in call
    Module zope.tales.expressions, line 211, in _eval
    Module z3c.formwidget.query.widget, line 212, in renderQueryWidget
    Module z3c.form.widget, line 153, in render
    Module zope.browserpage.viewpagetemplatefile, line 51, in call
    Module zope.pagetemplate.pagetemplate, line 132, in pt_render
    Module zope.pagetemplate.pagetemplate, line 240, in call
    Module zope.tal.talinterpreter, line 271, in call
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 531, in do_optTag_tal
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 821, in do_loop_tal
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 531, in do_optTag_tal
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 742, in do_insertStructure_tal
    Module zope.tales.tales, line 696, in evaluate
  • URL: /home/user/eggs/z3c.form-3.1.1-py2.7.egg/z3c/form/browser/radio_input.pt
  • Line 8, Column 4
  • Expression: <PythonExpr (view.renderForValue(item['value']))>
  • Names:
    {'args': (),
    'context': <Container at /gov/slider>,
    'default': <object object at 0xb77217e8>,
    'loop': {},
    'nothing': None,
    'options': {},
    'repeat': {},
    'request': <HTTPRequest, URL=http://localhost:8984/gov/slider/++add++ftw.slider.Pane>,
    'template': <zope.browserpage.viewpagetemplatefile.ViewPageTemplateFile object at 0xc6a03ac>,
    'view': <ContentTreeWidget 'form.widgets.link'>,
    'views': <zope.browserpage.viewpagetemplatefile.ViewMapper object at 0xb3caddac>}
    Module zope.tales.pythonexpr, line 59, in call
  • traceback_info: (view.renderForValue(item['value']))
    Module , line 1, in
    Module z3c.form.browser.radio, line 44, in renderForValue
    Module z3c.form.term, line 38, in getTermByToken
    Module zope.schema.vocabulary, line 133, in getTermByToken
    LookupError: --NOVALUE--

Für eine kleine Unterstützung zur Lösung des Problems bin ich dankbar.

Error in slider.js when using plone.app.widgets

I'm trying to mix ftw.slider 2.2.0 with plone.app.widgets 1.8.0 on Plone 4.3.6. When I install ftw.slider, I get this error in the js console:

Uncaught TypeError: $(...).slick is not a function        slider.js:8

This seems to indicate that slick is not registered with jQuery, but it's the only error. I would expect to see some other error from slick.min.js, but there isn't one. I also replaced the minified version with a non-minified one, but the result is the same.

I was just wondering if you have tried running ftw.slider with plone.app.widgets, and whether you have any idea what might be wrong.

These are my version pins, and again, I'm using Plone 4.3.6:

plone.app.contenttypes                = 1.1b5
plone.app.event                       = 1.1.5
plone.app.widgets                     = 1.8.0
plone.formwidget.recurrence           = 1.2.6
plone.app.z3cform                     = 1.0.1
ftw.slider                            = 2.2.0

Thanks!

Problems with Plone Classic Theme

Hello,

I have installed FTW Slider 3.0.0 in a newly installed Plone 4.3.11 site.

No problem with Sunburst theme.

But three problems with Plone Classic Theme (version 1.3.3):

  1. The slider narrows columns one and two (less wide).
  2. The column two is pushed outside of the screen (I need to scroll to the right in order to view it).
  3. The page width increases after each pane sliding.

Is this normal (expected)?

Any idea to solve it (without leaving using Plone Classic Theme)?

Thanks!

Manuel

Panes are loaded before JS

Afer reloading a page with the slider, the images are loaded before the javascript.

This means, each pane is displayed among themselves. After the slider is initialized by javascript, the panes are reorganized and no longer visible.

Before the slider will be initialized, you'll see all panes. This is not nice and should be fixed.

before initializing

bildschirmfoto 2015-12-04 um 14 50 24

after initializing

bildschirmfoto 2015-12-04 um 14 51 34

Make slider customizable

There should be a lot of customizations possible, such as:

  • auto-slide
  • auto-slide interval
  • sliding speed
  • slider width
  • scrolling direction (?)
  • ...

Action to activate sliders

  • Create an action "activate slider"
    • If there is no slider container in this context, the view should add one
    • There is always just one container with the id 'slider'
  • Create a special permission ftw.silder: Manage Sliders
  • Remove ftw.slider.Container form add menu (this could be tricky)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.