Recent
Categories
View Replies (4)

J51-Chloe - Layerslideshow

  1. Issue
0
Votes
Undo
  1. luk
    luk
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 08 May 2019
  5.  Subscribe via email
Hello,

I am rebuilding a site and started from scratch with J51-Chloe (Joomla 3.9.6 - PHP 7.2.14). The site is in test here: http://lukthcl31.thirtyone.axc.nl/toycollector032019/

I'm struggling with the J51-Layerslideshow on the home page. When opening the site (even after clearing the cache), the slider does not load smoothly. With Firefox it seems to be OK but with Chrome and Edge the first image is sometimes shockingly shown and for a moment the following image appears very briefly under the first image. With Internet Explorer 11 all 6 images hang for a while as an overlay on the page. Once loaded, the Slideshow works normally and the following images come as they should.

I have always cleaned the browser cache as well as the Joomla cache. I have already disabled all extensions, but without any result. What could be the reason?

Could it be that it has something to do with the image size of the photos? My images are png-files with transparent background and are 2000 x 600 px, 150 KB on average. The max. height setting at the LayerSlideshow is set on 600. Are there optimum image settings?

I have the following custom css:

.layerslideshow {
margin top: -50px;
margin-bottom: -100px;
}
.layerslideshow .NextArrow,
.layerslideshow .PrevArrow {
display: none! important;
}


Thanks for your advice.
Luk
Responses (4)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Luk

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

#layerslideshow92 {

    max-height: 380px;

    overflow: hidden;

}


I believe the issue is related to the wait for the Javascript to load which can be caused by large images. For PNG I would consider your images of reasonable size however you could try something like https://tinypng.com/ to shave off a few more bytes.

The above CSS should hide remaining images even while loading.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
luk
luk
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

Thanks for your advice.

I used the mentioned css-code, but still have some small questions:
- Is it equal to use #layerslideshow or .layerslideshow ? Because I had already some code beginning with .layerslideshow, which works.
- What is the meaning of 92 ?
- Does the max height of 380 px overrules the max height in the settings of the layerslideshow ?

I also shaved my png-files ( average with more than 70 % ! ) which seem to load better now.

Thanks again.
Luk
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Luk

1. In CSS, an ID (#) would have a higher specificity that a class(.). In this case that should not be relevant.

2. 92 is the module ID of your module (Module Manager -> [Right column]. Adding this ensures your CSS will only affect this module and no other instance of your LayerSlideshow module

3. Yes. This max height is on the entire module.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
luk
luk
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

All my thanks for your information and help.

Luk
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!