To create an alternate template for the articles in a safe place (where it won't get overwritten with updates), create the following file: /templates/tjohnsj3/html/com_content/article/image-background.php
image-background.php should include the following:
<?php
/**
* @package Joomla.Site
* @subpackage com_content
*
* @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
// Create shortcuts to some parameters.
$params = $this->item->params;
$images = json_decode($this->item->images);
$urls = json_decode($this->item->urls);
$canEdit = $params->get('access-edit');
$user = JFactory::getUser();
$info = $params->get('info_block_position', 0);
JHtml::_('behavior.caption');
$useDefList = ($params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author'));
?>
<div class="item-page<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="http://schema.org/Article">
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? JFactory::getConfig()->get('language') : $this->item->language; ?>" />
<?php if ($this->params->get('show_page_heading', 1)) : ?>
<div class="page-header">
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
</div>
<?php endif;
if (!empty($this->item->pagination) && $this->item->pagination && !$this->item->paginationposition && $this->item->paginationrelative)
{
echo $this->item->pagination;
}
?>
<?php if (!$useDefList && $this->print) : ?>
<div id="pop-print" class="btn hidden-print">
<?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
</div>
<div class="clearfix"> </div>
<?php endif; ?>
<?php if ($params->get('show_title') || $params->get('show_author')) : ?>
<div class="page-header">
<?php if ($this->item->state == 0) : ?>
<span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<?php if (strtotime($this->item->publish_up) > strtotime(JFactory::getDate())) : ?>
<span class="label label-warning"><?php echo JText::_('JNOTPUBLISHEDYET'); ?></span>
<?php endif; ?>
<?php if ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate())) && $this->item->publish_down != '0000-00-00 00:00:00') : ?>
<span class="label label-warning"><?php echo JText::_('JEXPIRED'); ?></span>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if (!$this->print) : ?>
<?php if ($canEdit || $params->get('show_print_icon') || $params->get('show_email_icon')) : ?>
<?php echo JLayoutHelper::render('joomla.content.icons', array('params' => $params, 'item' => $this->item, 'print' => false)); ?>
<?php endif; ?>
<?php else : ?>
<?php if ($useDefList) : ?>
<div id="pop-print" class="btn hidden-print">
<?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
<div class="article-info muted">
<dl class="article-info">
<dt class="article-info-term"><?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?></dt>
<?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
<dd class="createdby" itemprop="author" itemscope itemtype="http://schema.org/Person">
<?php $author = $this->item->created_by_alias ? $this->item->created_by_alias : $this->item->author; ?>
<?php $author = '<span itemprop="name">' . $author . '</span>'; ?>
<?php if (!empty($this->item->contact_link) && $params->get('link_author') == true) : ?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', JHtml::_('link', $this->item->contact_link, $author, array('itemprop' => 'url'))); ?>
<?php else: ?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_parent_category') && !empty($this->item->parent_slug)) : ?>
<dd class="parent-category-name">
<?php $title = $this->escape($this->item->parent_title); ?>
<?php if ($params->get('link_parent_category') && !empty($this->item->parent_slug)) : ?>
<?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_slug)) . '" itemprop="genre">' . $title . '</a>'; ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', '<span itemprop="genre">' . $title . '</span>'); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_category')) : ?>
<dd class="category-name">
<?php $title = $this->escape($this->item->category_title); ?>
<?php if ($params->get('link_category') && $this->item->catslug) : ?>
<?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug)) . '" itemprop="genre">' . $title . '</a>'; ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', '<span itemprop="genre">' . $title . '</span>'); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_publish_date')) : ?>
<dd class="published">
<span class="icon-calendar"></span>
<time datetime="<?php echo JHtml::_('date', $this->item->publish_up, 'c'); ?>" itemprop="datePublished">
<?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
<?php endif; ?>
<?php if ($info == 0) : ?>
<?php if ($params->get('show_modify_date')) : ?>
<dd class="modified">
<span class="icon-calendar"></span>
<time datetime="<?php echo JHtml::_('date', $this->item->modified, 'c'); ?>" itemprop="dateModified">
<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
<?php endif; ?>
<?php if ($params->get('show_create_date')) : ?>
<dd class="create">
<span class="icon-calendar"></span>
<time datetime="<?php echo JHtml::_('date', $this->item->created, 'c'); ?>" itemprop="dateCreated">
<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
<dd class="hits">
<span class="icon-eye-open"></span>
<meta itemprop="interactionCount" content="UserPageVisits:<?php echo $this->item->hits; ?>" />
<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
</dd>
<?php endif; ?>
<?php endif; ?>
</dl>
</div>
<?php endif; ?>
<?php if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
<?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
<?php endif; ?>
<?php if (!$params->get('show_intro')) : echo $this->item->event->afterDisplayTitle; endif; ?>
<?php echo $this->item->event->beforeDisplayContent; ?>
<?php if (isset($urls) && ((!empty($urls->urls_position) && ($urls->urls_position == '0')) || ($params->get('urls_position') == '0' && empty($urls->urls_position)))
|| (empty($urls->urls_position) && (!$params->get('urls_position')))) : ?>
<?php echo $this->loadTemplate('links'); ?>
<?php endif; ?>
<?php if ($params->get('access-view')):?>
<?php if (isset($images->image_fulltext) && !empty($images->image_fulltext)) : ?>
<?php $imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext; ?>
<div class="articleBackground parallax" data-velocity="-.1" id="slowScroll" style="background-image: url('/<?php echo htmlspecialchars($images->image_fulltext); ?>');">
</div>
<?php endif; ?>
<?php
if (!empty($this->item->pagination) && $this->item->pagination && !$this->item->paginationposition && !$this->item->paginationrelative):
echo $this->item->pagination;
endif;
?>
<?php if (isset ($this->item->toc)) :
echo $this->item->toc;
endif; ?>
<div itemprop="articleBody" class="contentArea" id="normalScroll">
<h1 itemprop="name">
<?php if ($params->get('show_title')) : ?>
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="/<?php echo $this->item->readmore_link; ?>" itemprop="url"> <?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
<?php endif; ?>
</h1>
<?php echo $this->item->text; ?>
</div>
<?php if ($useDefList && ($info == 1 || $info == 2)) : ?>
<div class="article-info muted">
<dl class="article-info">
<dt class="article-info-term"><?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?></dt>
<?php if ($info == 1) : ?>
<?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
<dd class="createdby" itemprop="author" itemscope itemtype="http://schema.org/Person">
<?php $author = $this->item->created_by_alias ? $this->item->created_by_alias : $this->item->author; ?>
<?php $author = '<span itemprop="name">' . $author . '</span>'; ?>
<?php if (!empty($this->item->contact_link) && $params->get('link_author') == true) : ?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', JHtml::_('link', $this->item->contact_link, $author, array('itemprop' => 'url'))); ?>
<?php else: ?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_parent_category') && !empty($this->item->parent_slug)) : ?>
<dd class="parent-category-name">
<?php $title = $this->escape($this->item->parent_title); ?>
<?php if ($params->get('link_parent_category') && $this->item->parent_slug) : ?>
<?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_slug)) . '" itemprop="genre">' . $title . '</a>'; ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', '<span itemprop="genre">' . $title . '</span>'); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_category')) : ?>
<dd class="category-name">
<?php $title = $this->escape($this->item->category_title); ?>
<?php if ($params->get('link_category') && $this->item->catslug) : ?>
<?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug)) . '" itemprop="genre">' . $title . '</a>'; ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', '<span itemprop="genre">' . $title . '</span>'); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_publish_date')) : ?>
<dd class="published">
<span class="icon-calendar"></span>
<time datetime="<?php echo JHtml::_('date', $this->item->publish_up, 'c'); ?>" itemprop="datePublished">
<?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
<?php endif; ?>
<?php endif; ?>
<?php if ($params->get('show_create_date')) : ?>
<dd class="create">
<span class="icon-calendar"></span>
<time datetime="<?php echo JHtml::_('date', $this->item->created, 'c'); ?>" itemprop="dateCreated">
<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
<?php endif; ?>
<?php if ($params->get('show_modify_date')) : ?>
<dd class="modified">
<span class="icon-calendar"></span>
<time datetime="<?php echo JHtml::_('date', $this->item->modified, 'c'); ?>" itemprop="dateModified">
<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
<dd class="hits">
<span class="icon-eye-open"></span>
<meta itemprop="interactionCount" content="UserPageVisits:<?php echo $this->item->hits; ?>" />
<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
</dd>
<?php endif; ?>
</dl>
<?php if ($params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
<?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php
if (!empty($this->item->pagination) && $this->item->pagination && $this->item->paginationposition && !$this->item->paginationrelative):
echo $this->item->pagination;
?>
<?php endif; ?>
<?php if (isset($urls) && ((!empty($urls->urls_position) && ($urls->urls_position == '1')) || ($params->get('urls_position') == '1'))) : ?>
<?php echo $this->loadTemplate('links'); ?>
<?php endif; ?>
<?php // Optional teaser intro text for guests ?>
<?php elseif ($params->get('show_noauth') == true && $user->get('guest')) : ?>
<?php echo $this->item->introtext; ?>
<?php //Optional link to let them register to see the whole article. ?>
<?php if ($params->get('show_readmore') && $this->item->fulltext != null) :
$link1 = JRoute::_('index.php?option=com_users&view=login');
$link = new JUri($link1);?>
<p class="readmore">
<a href="/<?php echo $link; ?>">
<?php $attribs = json_decode($this->item->attribs); ?>
<?php
if ($attribs->alternative_readmore == null) :
echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
elseif ($readmore = $this->item->alternative_readmore) :
echo $readmore;
if ($params->get('show_readmore_title', 0) != 0) :
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
endif;
elseif ($params->get('show_readmore_title', 0) == 0) :
echo JText::sprintf('COM_CONTENT_READ_MORE_TITLE');
else :
echo JText::_('COM_CONTENT_READ_MORE');
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
endif; ?>
</a>
</p>
<?php endif; ?>
<?php endif; ?>
<?php
if (!empty($this->item->pagination) && $this->item->pagination && $this->item->paginationposition && $this->item->paginationrelative) :
echo $this->item->pagination;
?>
<?php endif; ?>
<?php echo $this->item->event->afterDisplayContent; ?> </div>
You also want to create the following in the home root of the website: /includes/scrolly
Download this zip file, unzip, and copy the files into the scrolly folder that you just created on the server. It includes a working example at /scrolly/example.
Create a custom HTML module and paste the Javascript below into it. This was modified from the original version of the plugin to include noConflict mode. Otherwise, some parts of the front end administration don't work like the modals for inserting images.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/includes/scrolly/jquery.scrolly.js"></script>
<script>
var jQ = jQuery.noConflict(true);
jQ(document).ready(function(){
jQ('.parallax').scrolly();
});
</script>
Then, in your article options, select the alternative layout, 'image-background'. Now any image that you insert into the 'Full Article Image' under the tab, 'Images & Links', will appear as the page background and scroll slowly instead of the same speed as the content.
Comments