onatalushko / jcaurucel Goto Github PK
View Code? Open in Web Editor NEWLicense: GNU General Public License v2.0
License: GNU General Public License v2.0
Description ----------- This module provides a central function for adding jCarousel jQuery plugin elements. For more information about jCarousel, visit the official project: http://sorgalla.com/jcarousel/ Installation ------------ 1) Place this module directory in your modules folder (this will usually be "modules/contrib"). 2) Enable the module within your Drupal site at Administration -> Extend (admin/modules). Usage ----- The jCarousel module is most commonly used with the Views module to turn listings of images or other content into a carousel. 1) Add a new view at Administration -> Structure -> Views (admin/structure/views). 2) Change the "Display format" of the view to "jCarousel". Click the "Continue & Edit" button to configure the rest of the View. 3) Enable views ajax and use special jCarousel pager if you need preload. jCarousel not compatible with standard pages. 4) Click on the "Settings" link next to the jCarousel Format to configure the options for the carousel such as the animation speed and skin. 5) Add the items you would like to include in the rotator under the "Fields" section, and build out the rest of the view as you would normally. Note that the preview of the carousel within Views probably will not appear correctly because the necessary JavaScript and CSS is not loaded in the Views interface. Save your view and visit a page URL containing the view to see how it appears. API Usage --------- The jcarousel_add function is deprecated in favor to Drupal 8 render API usage. If you need to use jCarousel over hardcoded images list you can enable global load of jCarousel library and configure each list via data atributes The configuration options can be found at: http://sorgalla.com/projects/jcarousel/#Configuration A few special keys may also be provided in $settings, such as $settings['skin'], which can be used to apply a specific skin to the carousel. jCarousel module comes with a few skins by default, but other modules can provide their own skins by implementing MYMODULE.jcarousel_skins.yml file. Example ------- Skin implementation Please add file MYMODULE.jcarousel_skins.yml into module or MYTHEME.jcarousel_skins.yml into theme myskin: label: 'My Skin' file: assets/vendor/jcarousel/skins/myskin/jcarousel-myskin.css weight: 1 The following code in module will add a vertical jCarousel to the page: <?php $output = ''; $renderer = \Drupal::service('renderer'); $images = [ 'http://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg', 'http://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg', 'http://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg', 'http://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg', 'http://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg', 'http://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg', ]; $items_list = []; foreach ($images as $image) { $items_list[] = [ '#theme' => 'image', '#uri' => $image, '#width' => '150px', '#height' => '100px', '#alt' => t('Image alt'), ]; } $options = [ 'skin' => 'tango', ]; $jcourusel = [ '#theme' => 'jcarousel', '#options' => $options, '#items' => $items_list, ]; $output .= $renderer->render($jcourusel); ?> See jCarousel help page admin/help/jcarousel for more information. Authors ------- Nate Haug (http://quicksketch.org) Matt Farina (http://www.mattfarina.com) Wim Leers ([email protected] | http://wimleers.com/work) Rob Loach (http://www.robloach.net)
I have error in Firefox
ReferenceError: event is not defined
Drupal.jcarousel.attachEvents()
jcarousel.js:87
Drupal.behaviors.jcarousel.attach/<()
jcarousel.js:28
.each()
jquery.min.js:2
n.prototype.each()
jquery.min.js:2
Drupal.behaviors.jcarousel.attach()
jcarousel.js:11
Drupal.attachBehaviors()
drupal.js:168
drupal.js:178
t()
ready.min.js:4
jcarousel.js:87:9
Chrome reports way more errors
Notice: Undefined index: ajax in _jcarousel_generate_attributes() (line 639 of sites/example.d8/modules/contrib/jcaroucel/jcarousel.module).
_jcarousel_generate_attributes(Array, Array) (Line: 556)
template_preprocess_jcarousel(Array, 'jcarousel', Array) (Line: 294)
Drupal\Core\Theme\ThemeManager->render('jcarousel', Array) (Line: 438)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array) (Line: 933)
render(Array) (Line: 906)
Drupal\views\Plugin\views\field\Field->render_item(0, Array) (Line: 1153)
Drupal\views\Plugin\views\field\FieldPluginBase->advancedRender(Object) (Line: 224)
template_preprocess_views_view_field(Array, 'views_view_field', Array) (Line: 294)
Drupal\Core\Theme\ThemeManager->render(Array, Array) (Line: 438)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array) (Line: 1710)
Drupal\views\Plugin\views\field\FieldPluginBase->theme(Object) (Line: 769)
Drupal\views\Plugin\views\style\StylePluginBase->elementPreRenderRow(Array)
call_user_func(Array, Array) (Line: 384)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array) (Line: 717)
Drupal\views\Plugin\views\style\StylePluginBase->renderFields(Array) (Line: 586)
Drupal\views\Plugin\views\style\StylePluginBase->renderGrouping(Array, Array, 1) (Line: 473)
Drupal\views\Plugin\views\style\StylePluginBase->render(Array) (Line: 2121)
Drupal\views\Plugin\views\display\DisplayPluginBase->render() (Line: 129)
Drupal\webprofiler\Views\TraceableViewExecutable->render() (Line: 175)
Drupal\views\Plugin\views\display\Page->execute() (Line: 1592)
Drupal\views\ViewExecutable->executeDisplay('page_1', Array) (Line: 83)
Drupal\views\Element\View::preRenderViewElement(Array)
call_user_func(Array, Array) (Line: 384)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 231)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent{closure}() (Line: 577)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 232)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 122)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 95)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 61)
Symfony\Component\EventDispatcher\Debug\WrappedListener->__invoke(Object, 'kernel.view', Object) (Line: 116)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 124)
Symfony\Component\EventDispatcher\Debug\TraceableEventDispatcher->dispatch('kernel.view', Object) (Line: 144)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 62)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 62)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 53)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 211)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 125)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 79)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 42)
Drupal\webprofiler\StackMiddleware\WebprofilerMiddleware->handle(Object, 1, 1) (Line: 55)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 637)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
Good day!
I love the simplicity of this carousel menu, so I've tried to add it to my Drupal 8 site, without luck. After following the instructions carefully and setting up the view and block, I've tried adding a few nodes to check if it works, but for somewhat reason the carousel doesn't behave as it should, at all. Neither there are any controls shown, the elements (title and image field of certain content type) simply appear in a grid layout after each other, running out of the container's limits (no carousel "breakpoint"). There are no JS errors during page load. Am I missing something?
Attached two screenshots, the first one shows how the supposed jCarousel div appears on my site, the second one is the HTML code of the jCarousel div in question:
Thanks in advance!
Bendzs
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.