Slides within K2 item

Your code modifications and patches you want to share with others.
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Wed Apr 22, 2009 9:47 pm

Slides within K2 item

Post by checheconleche » Mon Mar 08, 2010 8:20 am

I recently did some hack-ish modification of my k2 template and wanted to get some feedback.

I wanted to include a slide from the module "tabs and slides" from joomlaworks inside of my k2 items. This way I could include an image gallery within a slide on the item view page and not have a bunch of thumbnails unless someone open the slide.

I am using simple image gallery pro in the items, and wanted to make it easy for my client to utilize the built in gallery upload within k2, but have it end up inside a slide.

In order to do this I downloaded and installed the tabs and slides module and proceeded to break it apart to use within the k2 template.

I then added the necessary code to the item.php file within my k2 template overrides, within my template.

1) I had to add the necessary javascript and css files so at the top of item.php, underneath the //no direct access line, I placed

* @version $Id: item.php 303 2010-01-07 02:56:33Z joomlaworks $
* @package K2
* @author JoomlaWorks
* @copyright Copyright (c) 2006 - 2010 JoomlaWorks Ltd. All rights reserved.
* @license GNU/GPL license:

// no direct access
defined('_JEXEC') or die('Restricted access');

<!-- added scripts and stylesheet for slides to work here-->
<?php JHTML::script($filename='tabs_slides_comp.js', $path = 'plugins/content/plugin_jw_ts/')?>
<?php JHTML::script($filename='tabs_slides.js', $path = 'plugins/content/plugin_jw_ts/')?>
<?php JHTML::script($filename='tabs_slides_opt_loader.js', $path = 'plugins/content/plugin_jw_ts/')?>
<?php JHTML::stylesheet($filename='tabs_slides.css', $path = 'plugins/content/plugin_jw_ts/')?>
<?php JHTML::script($filename='speed_info.js', $path = 'plugins/content/plugin_jw_ts/')?>
<!-- end additions for slides -->

<!-- Start K2 Item Layout -->

This adds the javascript that is included for "tabs and slides", the stylesheet and a new .js file that I created to hold the speed variables that are normally passed from the plugin admin to the code. I am not that good so I just hard coded the values into the file speed_info.js at the speed that I wanted them.

I didn't want the sliding effect, so i made it fast. the only code within speed_info.js is

var jwts_slideSpeed="10000"; var jwts_timer="1";

2) Then where the gallery is called to the page I placed

<?php if($this->item->params->get('itemImageGallery') && !empty($this->item->gallery)): ?>
<!-- Item image gallery -->
<a name="itemImageGalleryAnchor" id="itemImageGalleryAnchor"></a>
<!-- added to include slides in gallery -->
<div class="jwts_title"><div class="jwts_title_left"><a href="javascript:void(null);" title="Click to open!" class="jwts_title_text"><?php echo $this->item->title; ?>'s Photo Gallery</a></div></div><div class="jwts_slidewrapper"><div></p>
<!-- end added to include slides in gallery -->
<div class="itemImageGallery">
<?php echo $this->item->gallery; ?>
<!-- closing tags slides in gallery -->
<!-- end closing tags slides in gallery -->
<?php endif; ?>

I have commented around the areas that I added, but the code is what gets added automatically by the "tabs and slides" plugin when it replaces the {slide}{/slide} tags that get entered into an article.

Some modifications to the css later and I have a fully functioning gallery slide within my content items.

I have been working with Joomla for a while now, and really want to hear some feedback as to whether this is a good idea or not, I know that it has worked for me so far, still need to do some testing, but wanted to throw it out there. Feedback would be great, I think this is a nice thing to have within a k2 item.

I can't help but feel that I have made this more difficult than it needed to be, but I have learned a lot about the power of k2 in the process. I am in way over my head as far as I am concerned, so forgive me if i explained all of this poorly, I will understand if readers shake their heads after reading this wonder what the !@# I am talking about, it makes sense to me though.

Would love some feedback.

Joomla! Apprentice
Joomla! Apprentice
Posts: 43
Joined: Fri Mar 26, 2010 10:47 am
Location: UK

Re: Slides within K2 item

Post by K2Joom » Fri Mar 26, 2010 11:00 am

Hi checheconleche,

I will be taking a look at this as we have TandS but never really got around to using it.
As this is quite an interesting way, we will take a look and possible publish a review about it, hopefully to get you some more feedback..

Founder of
K2 Templates, Extensions & Support

Joomla! Explorer
Joomla! Explorer
Posts: 435
Joined: Tue Jul 29, 2008 11:54 pm
Location: NE PA

Re: Slides within K2 item

Post by natecovington » Thu Dec 02, 2010 10:14 pm


Thanks for sharing your code for the K2 template overrides... I plan on using your information here as a start to using Tabs & Slides in K2's category view. I'll report back tomorrow hopefully with my code as well.

At first glance, your step (1) scripts and style sheets for Tabs & Slides - wouldn't this already be in your <head> area, assuming that the tabs & slides plugin is installed and active?

Also, I found this in the K2 forums:

Code: Select all

Put the following after defined or die in the k2 > item.php file. Change to suit all of your CSS/Javascript paths.

$document =& JFactory::getDocument();

$slide_link = '<style type="text/css" media="screen">' ."\n";
$slide_link .= '@import "plugins/content/plugin_jw_ts/tabs_slides.css' ."\n";
$slide_link .= '</style>' ."\n";
$slide_display = '<style type="text/css" media="print">.jwts_tabbernav{display:none;}</style>';
$slide_speed = '<script type="text/javascript">var jwts_slideSpeed=30; var jwts_timer=10;</script>';


<!-- Change the path below to point to the js files on your site -->


<!-- Add this BEFORE the content you want to hide in the slide. Normally after the if statement -->
    <div class="jwts_title">
        <div class="jwts_title_left">
            <h3><a href="javascript:void(null);" title="Click to view comments" class="jwts_title_text">View/Add Item Comments</a></h3><br />
<div class="jwts_slidewrapper"><div>

<!-- Add this AFTER the content you want to hide in the slide component, before the endif -->
<div class="jwts_clr"></div>
This guy was using this method to hide the "comments" area on his K2 item template...
I am available for professional Joomla support, consulting, and custom work:

Joomla! Apprentice
Joomla! Apprentice
Posts: 43
Joined: Fri Mar 26, 2010 10:47 am
Location: UK

Re: Slides within K2 item

Post by K2Joom » Thu Dec 02, 2010 11:16 pm

I never reported back after checheconleche post to say that I had tested the code and found it to work, good job.
With that in mind, you can also do the same for video and comments just by replacing the itemImageGallery in exchange for the relevant call in the item.php

Remember, you can create several K2 templates, one as a standard layout and one with a built in tabs and slides layout. We have a handy plugin to allow each k2 template to have its own css file.

For those that want a plain ol easy, basic over ride for TandS to K2 items.

Here is a demo page:
All we did was install TandS and then add the required code to the k2 item.
Code to produce for the Tabs:

Code: Select all

{tab=First Tab} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et sem  eros, vel faucibus massa. Suspendisse potenti. Aliquam erat volutpat.  Phasellus dictum tortor ut mi ultricies ac sagittis risus elementum. 
{tab=Second Tab} Vestibulum quis ante quis quam feugiat tincidunt. Integer id nunc nulla?  Quisque quam sem, blandit at sodales non, venenatis ac odio! Praesent a  felis quis nisi ornare dignissim. Nullam consectetur nisl non eros  euismod sit amet dapibus ante auctor? Fusce auctor diam vehicula ligula  luctus fermentum?     
{tab=Third Tab} Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Donec et sem  eros, vel faucibus massa. Suspendisse potenti. Aliquam  erat volutpat.  Phasellus dictum tortor ut mi ultricies ac sagittis  risus elementum.
In that example, we added custom css styling by copying the JW TandS css file and placed it within the joomla templates css folder.
Then added the following line to the Joomla templates index.php:

Code: Select all

<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/css/tabs_slides.css" type="text/css" />
Hope someone finds this useful.
Founder of
K2 Templates, Extensions & Support



Return to “Core Hacks and Patches”