- Posts: 35
COMMUNITY FORUM
js list scroller for related k2 items
- Alex
-
Topic Author
- Offline
- Junior Member
my plan is to implement a nice js list scroller to k2. I manage to do an horizontal slider, like the commends in the item.php override told me.
But this doesnt look very modern. So my intention is an modern js scroller. In the web i found a instruction for an nice Slider , as u can see in the link. I like the Demo 4.
How can i implemnt this in my k2 item?
What i know so far:
I fit the html part (classes and so on) into my item.php in "templates/mytemplate/html/com_k2/myoverride/".
The first css should go into my k2.css in "templates/mytemplate/css/"
But now the quastion:
Where do i have to put the second part of the css? The "#demo4" stuff? Also in k2.css?
And where can i put the js code and how do i have to name the file, that it gets found?
Thatnks in advance
Alex
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- User
I would recommend slick.js kenwheeler.github.io/slick/
Dead simple to setup.
You are right about the overrides. The CSS should be placed in the k2.css, then all your K2 related styles will be in one place.
As for the .js I would the required script in your template's js file.
Please Log in or Create an account to join the conversation.
- Alex
-
Topic Author
- Offline
- Junior Member
- Posts: 35
Hi,Krikor wrote: Hello Alex,
I would recommend slick.js kenwheeler.github.io/slick/
Dead simple to setup.
awsome this is what i am looking for!
Dead easy, but i cant get it to work. I dont know much about js.
i uploaded the "slick" folder into "templates/mytemplate/html/com_k2/myoverride/" because there is the item.php from wich i will load it, right?
The items related part in my item.php i chanted this way:
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<?php if($this->item->params->get('itemRelated') && isset($this->relatedItems)): ?>
<!-- Related items by tag -->
<h3><?php echo JText::_("K2_RELATED_ITEMS_BY_TAG"); ?></h3>
<div class="itemRelated autoplay">
<?php foreach($this->relatedItems as $key=>$item): ?>
<div>
<!-- This is the part where the item related parts are located -->
</div>
<?php endforeach; ?>
<div class="clr"></div>
</div>
<?php endif; ?>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
</script>
Why is this not working?
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- User
Furthermore, jQuery should be already loaded by Joomla! itself, which will cause another issue.
Finally scripts should be added like this: docs.joomla.org/Adding_JavaScript
This should be a nice starting point.
<?php
$document = JFactory::getDocument();
$document->addScript('FULL_PATH_TO_SLICK.JS');
$document->addScriptDeclaration('
(function($){
$(document).ready(function(){
$(".autoplay").slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
});
})(jQuery);
');
?>
Please Log in or Create an account to join the conversation.
- Alex
-
Topic Author
- Offline
- Junior Member
- Posts: 35
Hi, thank you.Krikor wrote: The $ sign might be reserved from another library and it might cause issues. There is a also an extra trailing comma. The code should be executed in a document ready function.
Okay i will try it with ducument ready function first, when it is working i will do it in an external js.
I tryed doing with your workaround, also with absolute and realtive path to slick.js but it is not loading.
All related items are lested below each other. On the very top/bottom now appers a previous/next button.
Any ideas for a solution?
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- User
Please Log in or Create an account to join the conversation.
- Alex
-
Topic Author
- Offline
- Junior Member
- Posts: 35
Is my item.php part enough?
Or of what does it depend?
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- User
Please Log in or Create an account to join the conversation.
- Alex
-
Topic Author
- Offline
- Junior Member
- Posts: 35
Just your code in my item.php, and the slick folder in the template override folder.
Okay, i am about to figure out, how this github works, never used it before ...
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- User
Please Log in or Create an account to join the conversation.