Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#126986

How might one integrate JA Slide Gallery (from Avian) into Edenite?

:confused:

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#243317

It depends on in which place you gonna add it?
I took topsl as an example here now.
First copy the folder called “slimbox” from the Avian template to the Edenite template.
Then open up the index.php file from Edenite and find this:

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/typo.css" type="text/css" />
Paste this below:

<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl();?>/slimbox/css/slimbox.css" type="text/css" media="screen" />
Then open up the template.css file from Edenite and add this at the bottom of it:

/* RS Gallery elements */
ul#ja-rsmenu {
margin: 0;
padding: 0;
}

ul#ja-rsmenu li {
margin: 0;
padding: 0;
background: none;
}

.rsg2 div.moduletable,
.rsg2 div.moduletable_menu {
margin: 20px 0 10px;
}

.rsg2-pageNav {
text-align: center;
}

div.rsg2-toolbar {
margin-top: 10px;
}

div.rsg2-toolbar a {
padding: 0;
text-transform: uppercase;
outline: none;
font-size: 125%;
font-weight: bold;
display: block;
position: relative;
height: 30px;
background: url(../images/download_f2.png) no-repeat 5px 5px;
}

div.rsg2-toolbar a span {
position: absolute;
top: 25%;
left: 40%;
}

div.rsg2-toolbar a br {
display: none;
}

div.rsg2-toolbar a img {
display: none;
}

div.rsg2-mygalleries-links a {
color: #F09018 !important;
}

div.rsg2-mygalleries-links a:hover,
div.rsg2-mygalleries-links a:focus,
div.rsg2-mygalleries-links a:active {
color: #F09018 !important;
}
Then open the Avian templates image folder and find the image called “download_f2.png” and copy to the Edenite images folder.
Now you can try the template and see if the gallery works as it should. It looks a little bit strange?
Open the template.css file from Edenite again and find this:

#ja-topsl {
height:240px;
margin:0pt 0pt 10px;
}
And change height: 240px; to the height you have set in the backend of the RSgallery2 slide.

Still not as it should be…
Open the ja.scripts.js file in the js folder and find this on line 151:

bgdiv.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
bgdiv.inject(obj, 'top');
//alert(obj.innerHTML + 'n' + bgdiv.innerHTML);
} else {
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
}
}
}.bind(this));
}
And add this below:

function ie6pnghover (obj, img_out, img_over) {
obj = $(obj);
if(!obj) return;
if (obj.tagName == 'IMG') {
//This is an image
obj.setStyle('height',obj.offsetHeight);
obj.setStyle('width',obj.offsetWidth);
obj.src = 'images/blank.png';
obj.setStyle ('visibility', 'visible');
}else{
obj.setStyle ('background', 'none');
}
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img_out+", sizingMethod='crop')");
obj.addEvent('mouseover', function () {
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img_over+", sizingMethod='crop')");
});
obj.addEvent('mouseout', function () {
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img_out+", sizingMethod='crop')");
});
}
Then in the index.php file find this on line 58:

<?php if ($tmpTools->isIE6()) { ?>
<!-->
<script type="text/javascript">
var siteurl = '<?php echo $tmpTools->baseurl();?>';
</script>
<!-->
Add this below:

<script type="text/javascript">
window.addEvent ('domready', makeTransBG);
function makeTransBG() {
makeTransBg($('features'));
$$('#ja-rsslide-navigation').each(function(el){
makeTransBg(el, null, 'scale');
});
ie6pnghover ($('ja-rsslide-navigation-left'), '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-left.png', '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-left-hover.png');
ie6pnghover ($('ja-rsslide-navigation-right'), '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-right.png', '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-right-hover.png');

}
</script>

Now you should have a working rs gallery with the rsgallery slider in Edenite, this can be used for any template actually.

4 users say Thank You to Menalto for this useful post

1. tronegil
2. TomC
3. lotushost
4. larryndeb

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#243357

The topsl position is exactly where I want to put it – THANK YOU !!!

🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#243407

Follow-up question . . . . .

What if I wanted to stick with JA-Slideshow, but incorporate the kind of slide number/pause button display as in JA-Nerine ???

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#243557

<em>@tcraw1010 46114 wrote:</em><blockquote>Follow-up question . . . . .

What if I wanted to stick with JA-Slideshow, but incorporate the kind of slide number/pause button display as in JA-Nerine ???</blockquote>

Help me Obi-Wan Menalto …. you’re my only hope.

:((

[cyrber971 Friend cyrber971Join date: June 2007Posts: 28Downloads:0Uploads:1 Thanks: 2]

#244600

Fine but how to with corona ?
Thank’s !

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#244606

<em>@cyrber971 47607 wrote:</em><blockquote>Fine but how to with corona ?
Thank’s !</blockquote>
Might want to ask in the Corona forum section.

😉

[Author]

Posts