Keyword

js list scroller for related k2 items

  • Alex
  • Alex's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 8 months ago #150795 by Alex
Hi,

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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 8 months ago #150803 by Krikor Boghossian
Replied by Krikor Boghossian on topic js list scroller for related k2 items
Hello Alex,

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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Alex
  • Alex's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 8 months ago #150814 by Alex
Replied by Alex on topic js list scroller for related k2 items

Krikor wrote: Hello Alex,

I would recommend slick.js kenwheeler.github.io/slick/
Dead simple to setup.

Hi,
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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 8 months ago #150822 by Krikor Boghossian
Replied by Krikor Boghossian on topic js list scroller for related k2 items
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.

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);
');
?>

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Alex
  • Alex's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 8 months ago - 8 years 8 months ago #150823 by Alex
Replied by Alex on topic js list scroller for related k2 items

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.

Hi, thank you.
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?
Last edit: 8 years 8 months ago by Alex.

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 8 months ago #150859 by Krikor Boghossian
Replied by Krikor Boghossian on topic js list scroller for related k2 items
Can you send me a link to your site?

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Alex
  • Alex's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 8 months ago #150885 by Alex
Replied by Alex on topic js list scroller for related k2 items
unforunatly no, since it is not online.
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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 8 months ago #150890 by Krikor Boghossian
Replied by Krikor Boghossian on topic js list scroller for related k2 items
Did you add slick js's css file as well.You can post the item.php in a gist (github) so I can take a look.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Alex
  • Alex's Avatar Topic Author
  • Offline
  • Junior Member
More
8 years 8 months ago #150909 by Alex
Replied by Alex on topic js list scroller for related k2 items
No i did not use the js's css file, because i thought i should work as well without. Maybe not as good loocking, but should work.
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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 8 months ago #150927 by Krikor Boghossian
Replied by Krikor Boghossian on topic js list scroller for related k2 items
The CSS file is needed, without it, it will not work properly.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum