Ok I learned how to do this myself.. lol and I don't know coding...
So for anyone that wants to do this I have a step by step instruction guide.
First you need to locate this file:
modules/mod_ariimageslider/tmpl/default.php
We are going to edit this file by adding 2 divs into this file.
so find and locate:
| Code: |
$theme = $params->get('theme');
if (empty($theme))
$theme = 'default';
$controlNav = (bool)$params->get('opt_controlNav');
?>
|
right after that line of code insert this:
| Code: |
<div id="<?php echo $sliderId; ?>_frameHolder">
|
Next you will scroll all the way to the bottom of the document and find this code:
| Code: |
<?php
endif;
?>
</div>
|
And then you will insert this code right after it:
| Code: |
<div id="<?php echo $sliderId; ?>_myFrame"></div>
</div>
|
Then save the file...
So now your code should look like this:
| Code: |
<?php
/*
* ARI Image Slider Joomla! module
*
* @package ARI Image Slider Joomla! module.
* @version 1.0.0
* @author ARI Soft
* @copyright Copyright (c) 2009 www.ari-soft.com. All rights reserved
* @license GNU/GPL (http://www.gnu.org/copyleft/gpl.html)
*
*/
defined('ARI_FRAMEWORK_LOADED') or die('Direct Access to this location is not allowed.');
$baseUri = JURI::base(true);
$cssClass = $params->get('cssClass');
$startSlide = intval($params->get('opt_startSlide'), 10);
$enableNav = (bool)$params->get('opt_controlNav');
$slideCnt = count($slides);
if ($startSlide < 0 || $startSlide > $slideCnt - 1) $startSlide = 0;
$theme = $params->get('theme');
if (empty($theme))
$theme = 'default';
$controlNav = (bool)$params->get('opt_controlNav');
?>
<div id="<?php echo $sliderId; ?>_frameHolder">
<div id="<?php echo $sliderId; ?>_wrapper" class="ari-image-slider-wrapper ari-is-theme-<?php echo $theme; ?><?php if ($cssClass):?> <?php echo $cssClass; ?><?php endif; ?><?php if ($controlNav):?> ari-image-slider-wCtrlNav<?php endif; ?>">
<div id="<?php echo $sliderId; ?>" class="ari-image-slider nivoSlider">
<?php
$slideIdx = 0;
foreach ($slides as $slide):
$isLink = !empty($slide['link']);
$imgAttrs = $slide['imgAttrs'];
if ($slideIdx != $startSlide)
{
if (!isset($imgAttrs['style']))
$imgAttrs['style'] = array();
$imgAttrs['style']['display'] = 'none';
}
?>
<?php
if ($isLink):
?>
<a<?php echo AriHtmlHelper::getAttrStr($slide['lnkAttrs']); ?>>
<?php
endif;
?>
<img<?php echo AriHtmlHelper::getAttrStr($imgAttrs); ?> />
<?php
if ($isLink):
?>
</a>
<?php
endif;
?>
<?php
++$slideIdx;
endforeach;
?>
</div>
<?php
if ($enableNav):
?>
<div class="nivo-controlNavHolder">
<div class="nivo-controlNav">
<?php
$slideIdx = 0;
foreach ($slides as $slide):
$thumbNav = !empty($slide['nav']);
$nav = $thumbNav ? $slide['nav'] : null;
$navEl = $thumbNav ? '<img' . AriHtmlHelper::getAttrStr(array('src' => $nav['image'], 'width' => $nav['width'], 'height' => $nav['height'], 'alt' => $nav['alt'])) . '/>' : $slideIdx;
?>
<a rel="<?php echo $slideIdx; ?>" class="nivo-control<?php if ($startSlide == $slideIdx):?> active<?php endif; ?>">
<span<?php echo AriHtmlHelper::getAttrStr(array('style' => array('width' => $nav['width'] . 'px', 'height' => $nav['height'] . 'px'), 'class' => 'nivo-thumbNavWrapper')); ?>>
<?php echo $navEl; ?>
<span class="nivo-arrow-border"></span>
<span class="nivo-arrow"></span>
</span>
</a>
<?php
++$slideIdx;
endforeach;
?>
</div>
</div>
<?php
endif;
?>
</div>
<div id="<?php echo $sliderId; ?>_myFrame"></div>
</div>
|
Then in the actual module you will place your own custom CSS code:
| Code: |
#ais_104_frameHolder {
width: 971px;
height: 460px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 30px;
}
#ais_104_myFrame {
width: 971px;
height: 480px;
background: url(images/layoutObjects/cityGrungeFrame.png) no-repeat;
display: block;
z-index: 10000;
position: absolute;
bottom: 25px;
float: left;
}
|
is a unique code for each ARI Image Slider that is created. that way you can put a
DIFFERENT custom frame
OVER each ARI Image Slider threw out your site...
NOTE: In order to find the unique code you will have to publish the page, view source code and search for
_myFrame or
_frameHolder and in front of each will be the unique code.
Also you will need to edit the css code above just a tiny bit to match your particular
FRAME/MASK that you intend to place over your slider... So if you got this far the rest should be easy...
It would be cool if ARI adds that line of code into the actual ARI Image Slider, and give us a way to view the unique code, that's generated, in the module itself so we don't have to go digging for it...
I hope you guys enjoy this...
