Joomla Templates Club 406,261 posts

[jcalado Friend jcaladoJoin date: October 2011Posts: 6Downloads:0Uploads:3 Thanks: 9]

#171355

Hi,

The JA Tiris is a pleasent template.

But a problem occurs every time you return to the home page, there is a delay with the slideshow. During this delay all the modules slide to the top and get over the logo area, it’s uglly to see (everytime you returns to the home page).

The delay is not a problem, problem is the move to the top and then to the normal position of some modules/areas.

For example with the Ja Kranos everytime you return to the homepage all the module/areas position are fixed, there is some delay but only to put the images in the cache (no module moves from it’s normal position)

I’m finishing 2 websites with this template but they were not approved due to this problem, and the team allready dedicate many hours of work.

Image during the delay:

Image after the delay:

The same problem occurs in the tempalte demo:
http://www.joomlart.com/demo/#joomla17-templates.joomlart.com/ja_tiris/

How can i resolve this? Can someone help me?

Best regards and thanks for some help.

---

Attachments:

1. 
2. 

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

#428874

<em>@jcalado 286391 wrote:</em><blockquote>Hi,

The JA Tiris is a pleasent template.

But a problem occurs every time you return to the home page, there is a delay with the slideshow. During this delay all the modules slide to the top and get over the logo area, it’s uglly to see (everytime you returns to the home page).

The delay is not a problem, problem is the move to the top and then to the normal position of some modules/areas.

</blockquote>
I see what you’re saying . . . and I am sorry to say that I am not entirely certain what is causing this effect.

I am going to submit this issue to our JA Development Team to look into.

In the meantime, do you have “Optimize CSS” and Javascript set to “Yes” within your Template Manager–>General Settings?

1 user says Thank You to TomC for this useful post

1. jcalado

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#428877

<em>@jcalado 286391 wrote:</em><blockquote>Hi,

The JA Tiris is a pleasent template.

But a problem occurs every time you return to the home page, there is a delay with the slideshow. During this delay all the modules slide to the top and get over the logo area, it’s uglly to see (everytime you returns to the home page).

The delay is not a problem, problem is the move to the top and then to the normal position of some modules/areas.

For example with the Ja Kranos everytime you return to the homepage all the module/areas position are fixed, there is some delay but only to put the images in the cache (no module moves from it’s normal position)

I’m finishing 2 websites with this template but they were not approved due to this problem, and the team allready dedicate many hours of work.

Image during the delay:

Image after the delay:

The same problem occurs in the tempalte demo:
http://www.joomlart.com/demo/#joomla17-templates.joomlart.com/ja_tiris/

How can i resolve this? Can someone help me?

Best regards and thanks for some help.</blockquote>

Yup
I have faced this issue , also in localhost .
I guess that module have a bit trouble and need a bit optimize.
Let’s me to check around this module to get some points.

Thank you,

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

#428879

<em>@jooservices 288138 wrote:</em><blockquote>Yup
I have faced this issue , also in localhost .
I guess that module have a bit trouble and need a bit optimize.
Let’s me to check around this module to get some points.

Thank you,</blockquote>
I guess you didn’t see the part where I’ve already submitted this bug to JA Devs for review and bug fix, eh?

Got it handled, Joo . . . will let you know if further assistance is required – Thanks

😎

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#428882

Hi
I think we have a little bit trouble with this module. Let’s check out / investigate into this module

<div id="Mod79" class="ja-moduletable moduletable clearfix">
<div class="ja-box-ct clearfix">

<div style="visibility: visible;" id="ja-slide-79" class="ja-slidewrap_tiris ja-vertical_right">
<div class="ja-slide-main-wrap" style="width: 993px; height: 730px;">
<div class="ja-slide-main">
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: block; left: 0px; visibility: visible; opacity: 1;"><img alt="Cycling Apparel
Cum sociis natoque penatibus et magnis dises " src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-8_993_730.jpg">
</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="Golden State Warriors
Nulla dapibus neque sit amet libero ser suscipit hendrerit. Donec rhoncus mollis suscipit. Mauris posuere turpis eu dui lobortis non iaculis odio tincidunt." src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-7_993_730.jpg">
</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="We make good cartoon design
In our company, our professionals are constantly trained and updated, covering a vast area of business in global financial markets." src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-1_993_730.jpg">
</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="Beautiful design scene
Suspendisse consequat metus quis sem mattis lobortis. Ut eu tellus ullamcorper orci convallis elem entum non sed nibh. Phasellus a rhoncus nisi. Fusce posuere condie tum posuere. Quisque velit nisi." src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-5_993_730.jpg">
</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="Beautiful design scene
Suspendisse consequat metus quis sem mattis lobortis. Ut eu tellus ullamcorper orci convallis elem entum non sed nibh. Phasellus a rhoncus nisi. Fusce posuere condie tum posuere. Quisque velit nisi." src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-3_993_730.jpg">
</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="Our professionals are constantly
In our company,our professionals are constantly trainedand updated, covering a vast area of business in global ." src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-4_993_730.jpg">
</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="Say hello to Joomlart
Sodales ac feugiat elit Integer gravida risus eu habitasse ligula Lorem. Id senectus tincidunt metus porta amet sem senectus tellus Curabitur Fusce." src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-2_993_730.jpg">
</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="Cleatskins are a revolutionary
Cum sociis natoque penatibus et magnis dis parturient montes . " src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-6_993_730.jpg">
</div>
</div>
<div class="mask-bottom"> </div>
<div class="maskDesc" style="display: block; position: absolute; width: 993px; height: 730px; bottom: 0px; visibility: visible; opacity: 1;"><div class="inner"><a title="" class="readon"><span>View more</span></a></div><div class="ja-slide-desc"><h3>
Cycling Apparel
</h3>
<p>
Cum sociis natoque penatibus et magnis dises
</p>
</div></div>
</div>

<div class="ja-slide-descs">

<div class="ja-slide-desc"><h3>
Golden State Warriors
</h3>
<p>
Nulla dapibus neque sit amet libero ser suscipit hendrerit...
</p>
</div>
<div class="ja-slide-desc"><h3>
We make good cartoon design
</h3>
<p>
In our company, our professionals are constantly trai...
</p>
</div>
<div class="ja-slide-desc"><h3>
Beautiful design scene
</h3>
<p>
Suspendisse consequat metus quis sem mattis lobortis. Ut e...
</p>
</div>
<div class="ja-slide-desc"><h3>
Beautiful design scene
</h3>
<p>
Suspendisse consequat metus quis sem mattis lobortis. Ut e...
</p>
</div>
<div class="ja-slide-desc"><h3>
Our professionals are constantly
</h3>
<p>
In our company,our professionals are constantly ...
</p>
</div>
<div class="ja-slide-desc"><h3>
Say hello to Joomlart
</h3>
<p>
Sodales ac feugiat elit Integer gravida risus eu habitasse ...
</p>
</div>
<div class="ja-slide-desc"><h3>
Cleatskins are a revolutionary
</h3>
<p>
Cum sociis natoque penatibus et magnis dis parturi...
</p>
</div>

</div>
<div class="viewbutton">
<div class="ja-slide-mask">
</div>

<div class="ja-slide-thumbs-wrap ja-slide-thumbnail " style="width: 90px; height: 244px;">
<div class="ja-slide-thumbs" style="left: 0px; top: 0px;">
<div class="ja-slide-thumb active" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-8_66_45.jpg">
</div>
<div class="ja-slide-thumb" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-7_66_45.jpg">
</div>
<div class="ja-slide-thumb" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-1_66_45.jpg">
</div>
<div class="ja-slide-thumb" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-5_66_45.jpg">
</div>
<div class="ja-slide-thumb" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-3_66_45.jpg">
</div>
<div class="ja-slide-thumb" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-4_66_45.jpg">
</div>
<div class="ja-slide-thumb" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-2_66_45.jpg">
</div>
<div class="ja-slide-thumb" style="width: 90px; height: 61px;">
<img alt="Photo Thumb" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-6_66_45.jpg">
</div>

</div>

<div class="ja-slide-thumbs-mask" style="width: 5000px; top: -2000px;"><span class="ja-slide-thumbs-mask-left" style="height: 61px; width: 2000px; visibility: visible; opacity: 8;"> </span><span class="ja-slide-thumbs-mask-center" style="height: 61px; width: 90px; visibility: visible; opacity: 8;"> </span><span class="ja-slide-thumbs-mask-right" style="height: 61px; width: 2000px; visibility: visible; opacity: 8;"> </span></div>

<p class="ja-slide-thumbs-handles" style="left: 0px; top: 0px;">
<span style="width: 90px; height: 61px;" class="active"><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-8_66_45.jpg">
</span>
<span style="width: 90px; height: 61px;" class=""><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-7_66_45.jpg">
</span>
<span style="width: 90px; height: 61px;" class=""><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-1_66_45.jpg">
</span>
<span style="width: 90px; height: 61px;" class=""><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-5_66_45.jpg">
</span>
<span style="width: 90px; height: 61px;" class=""><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-3_66_45.jpg">
</span>
<span style="width: 90px; height: 61px;" class=""><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-4_66_45.jpg">
</span>
<span style="width: 90px; height: 61px;" class=""><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-2_66_45.jpg">
</span>
<span style="width: 90px; height: 61px;" class=""><img alt="" src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-6_66_45.jpg">
</span>

</p>
</div>

<div style="background: yellow !important;" class="ja-slide-buttons clearfix">
<span class="ja-slide-prev">« Previous</span>
<span class="ja-slide-playback">‹ Playback</span>
<span class="ja-slide-stop">Stop</span>
<span class="ja-slide-play">Play ›</span>
<span class="ja-slide-next">Next »</span>
</div>
</div>
</div>

<script type="text/javascript">
var Ja_direction = '';
var cookie_path = '/';
var cur_template_name = 'ja_tiris';
var Ja_maskAlignment_79 = 'bottom';
window.addEvent('load', function(){
if(typeof(tmpl_name) =='undefined')
{
cookie_path = "ja_tiris_direction";
}
else
{
cookie_path = tmpl_name+"_direction";
}
Ja_direction = Cookie.read(cookie_path);
if( Ja_direction == '' || Ja_direction == null)
{
Ja_direction = 'ltr';
}
var style_l_value = 'auto';
if(cur_template_name == 'ja_norite')
{
style_l_value = '0';
}

if(Ja_direction == 'rtl')
{
setStyleLinkWithRTLDirection();
$('ja-slide-79').getElement(".ja-slide-main").setStyle('left',style_l_value);
$('ja-slide-79').getElement(".ja-slide-main").setStyle('right','auto');
if(Ja_maskAlignment_79 == 'right')
{
Ja_maskAlignment_79 = 'left';
}
else if(Ja_maskAlignment_79 == 'left')
{
Ja_maskAlignment_79 = 'right';
}

}
new JASlideshow2('ja-slide-79', {
startItem: 0,
showItem: 4,
itemWidth: 90,
itemHeight: 61,
mainWidth: 993,
mainHeight: 730,
maskWidth: 993,
maskHeigth:730,
duration: 400,
transition: Fx.Transitions.Quad.easeInOut,
animation: 'fade',
animationRepeat: 'true',
thumbOpacity:08,
maskOpacity: 1,
buttonOpacity: 0.4,
showDesc: 'desc',
descMode: 'always',
readmoretext: 'View more',
overlap: 1,
navigation:'thumbs',
urls:['','','','','','','',''],
targets:['','','','','','','',''],
autoPlay: 0,
interval: 5000,
maskAlignment: Ja_maskAlignment_79,
languageDirection:( typeof Ja_direction == 'string') ? Ja_direction : '',
maskerTransStyle:'opacity',
maskerTrans:Fx.Transitions.linear,
navePos:'vertical_right'
});
});
</script>

<script type="text/javascript">
function setStyleLinkWithRTLDirection()
{
var links = document.getElementsByTagName ('link');
var script = document.createElement('link');
script.setAttribute('type', 'text/css');
script.setAttribute('rel', 'stylesheet');
script.setAttribute('href', 'http://ja.joodevelopment.com/ja_tiris/modules/mod_jaslideshow/assets/themes/default/mod_jaslideshow_rtl.css');
document.getElementsByTagName("head")[0].appendChild(script);
}
</script> </div>
</div>

For each “slide” we have a large image, like this

</div>
<div class="ja-slide-item" style="width: 993px; height: 730px; position: absolute; top: 0px; display: none; left: 0px;"><img alt="Say hello to Joomlart
Sodales ac feugiat elit Integer gravida risus eu habitasse ligula Lorem. Id senectus tincidunt metus porta amet sem senectus tellus Curabitur Fusce." src="/ja_tiris/images/resized/images/stories/demo/slideshow/sl-2_993_730.jpg">
</div>

In my localhost sample image take arround

53 KB (54,267 bytes)
and with 8 slides we have
53 x 8 = 424 KB.
Not only that but also have thumb images.
A bit heavy to load.

So, by logic of current code i don’t think we can do much.
I think we should think about another better solution:
– Only load first image
– Ajax load another image after page loaded.

Thank you

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#428886

Hi
Update:
That’s use javascript to determine width & height and visible of element after loaded ( that’s why invisible for a time )

element.style {
height: 730px;
width: 993px;
}

So if you already known this size & want to show slide before it’s complete loaded. We can use this solution:

.ja-slidewrap_tiris {
position: relative;
visibility: visible !important;
}

.ja-slide-main-wrap { overflow: hidden; position: relative; height: 730px;
width: 993px;}

modulesmod_jaslideshowassetsthemestirisstyle.css

1 user says Thank You to jooservices for this useful post

1. jcalado

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

#428888

OR . . . since this issue is also occurring within the JA Tiris demo – it’s an issue that our JA Development Team NEEDS to look into as a bug so they can research the issue, fix it and update the template demo and downloads.

😎

1 user says Thank You to TomC for this useful post

1. jcalado

[jcalado Friend jcaladoJoin date: October 2011Posts: 6Downloads:0Uploads:3 Thanks: 9]

#428950

Dear Tom, Joo and Himangi,

Many Thanks for the help.

Tom, should I wait for the JA Development solution or try another?

Regards,
José Calado

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

#429005

<em>@jcalado 288224 wrote:</em><blockquote>
Tom, should I wait for the JA Development solution or try another?

Regards,
José Calado</blockquote>
My personal recommendation would be to let’s wait to see what our JA Dev Team finds and recommends – especially considering that this issue occurs within the J ATiris demo as well . . . so it definitely needs to be addressed.

1 user says Thank You to TomC for this useful post

1. jcalado

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#429060

Hi José Calado,

Try this solution
Open the file of templatesja_tiriscsstemplate.css and add this css

.no-sm #ja-mainnav .main-inner2 { padding-bottom: 40px; }

.no-sm #ja-slideshow .main-inner2 {
background: #fff;
}

.no-sm .ja-sidenews-wrap {
position: relative;
left: 20px;
}

I hope that should help !

[abdujap Friend abdujapJoin date: September 2014Posts: 35Downloads:0Uploads:5 Thanks: 10]

#429431

Hey I don’t want to beat a dead horse here, but obviously I’m having the same issue with the Tiris theme. I’ve decided not to launch a completed redesign of a website I used Tiris on due to this loading issue. Since it’s now been a few days, I was wondering if there is any updated info?

Thanks!

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

#429443

Did you try to apply Dat Hoang’s fix above?

[abdujap Friend abdujapJoin date: September 2014Posts: 35Downloads:0Uploads:5 Thanks: 10]

#429478

<em>@TomC 288881 wrote:</em><blockquote>Did you try to apply Dat Hoang’s fix above?</blockquote>

I did, however it also doesn’t seem ideal as the slideshow module still loads a little quirky. The navigation was way over to the left side at the beginning of the load and then ends up on the right side when it finishes loading. Neither this fix nor the standard loading has that “polished” look to it.

*off-topic* Any chance you attended high school at a place with the initials LHS, TomC?

Cheers

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

#429535

<em>@abdujap 288925 wrote:</em><blockquote>
*off-topic* Any chance you attended high school at a place with the initials LHS, TomC?

Cheers</blockquote>
Depends what the “L” stands for.

[abdujap Friend abdujapJoin date: September 2014Posts: 35Downloads:0Uploads:5 Thanks: 10]

#429748

<em>@TomC 289003 wrote:</em><blockquote>Depends what the “L” stands for.</blockquote>
How about this… were you a “Raider”? 🙂

And any chance there’s an update on the loading issue?

Thanks!

[Author]

Posts