Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Last thumbnail missing

Last thumbnail missing 20 Dec 2019 17:30 #54648

I have just installed the latest version of the free Slideshow CK and set up a slideshow with five pictures with Thumbnails set to 'yes'. Only four thumbnails are displayed. The last one is missing, although it is in the thumbnail folder. To test it, I unpublished the last picture so that only four images are displayed. Now there are only three thumbnails.

Please Log in or Create an account to join the conversation.

Last thumbnail missing 21 Dec 2019 08:59 #54652

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24633
  • Karma: 427
  • Thank you received: 3088
Hi
please give me the url of the page where I can see the problem
CEd
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Last thumbnail missing 21 Dec 2019 11:34 #54654

Here you are:
This message contains confidential information


BTW, I have also had to write some css with an !important instruction to overwrite some inline style which includes a huge padding bottom of 86px:
<div id="camera_wrap_91" class="slideshowck camera_wrap camera_amber_skin" style="display: block; height: 527px; padding-bottom: 86px;">

which appears immediately after
<!--START: Modules Anywhere-->

I'm not sure why that padding is so large as it cuts off the bottom of the images. Should this code be in the SlideshowCK css rather than inline, to make it easier to overwrite and avoid using !important?

Thank you.

Please Log in or Create an account to join the conversation.

Last edit: by GillianS.

Last thumbnail missing 22 Dec 2019 09:35 #54657

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24633
  • Karma: 427
  • Thank you received: 3088
the problem is the calcul of the width of the thumbs container
you can try to add this css code
.camera_thumbs_cont > ul { padding: 0 !important; }

for the padding, I don't know what is wrong here, but if you can fix it with CSS this is great
CEd
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Last thumbnail missing 22 Dec 2019 16:09 #54664

Hi. That didn't work. It seems to be a problem with the inline styling of
width: 543px
in the ul element.

So, I've have solved it with this code:
.camera_thumbs_cont ul {  min-width: 100% !important; }

Is it necessary to have this styling code inline, or is it generated automatically by your code?

Anyway, as a test, I installed an older version of SlideshowCK (from November 2018) that I happened to have on my pc. The inline code has changed:

1: The
padding-bottom: 86px
used to be
margin-bottom: 86px;
and it displays correctly when it is 'margin-bottom'

2: The .camera_thumbs_cont ul width used to be 608px rather than the current 543px. I think it would be better as 100% or a calculation starting from 100%.

Please Log in or Create an account to join the conversation.

Last thumbnail missing 23 Dec 2019 09:46 #54666

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24633
  • Karma: 427
  • Thank you received: 3088
1. ok strange that you are the only one to have this problem currently.
You can also check the demos on my website :)
The most important thing is that you can solve it easily, I suppose that this is due to a template/css conflict

2. your solution does not work ;)
it works only when your window size is big, I mean that the 100% width in the thumbs area is bigger than 608px. If you reduce the window size, then you will get 4 thumbs again.
you must force the value to 608px (or more) to make the 5 images aligned. This is calculated by javascript and I suppose in the same scenario as point 1. that everything is related to some CSS conflict
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Last thumbnail missing 30 Dec 2019 11:40 #54702

I think I am getting to the bottom of the problem.

I switched the template to Protostar where the thumbnails display correctly and used Firefox inspector to see if I could spot any differences and have noticed that in Protostar the ul element of the thumbnails initially has an inline style of
width=770px; margin-left: auto; margin-right: auto;
(pic #1)


After the first five slides have been shown, the thumbnail display shifts to the left and now has this style, which is correct:
width=770px; margin-left: auto-318px; margin-right: auto;
(pic #2, at the last slide)


However, in my template, for some reason the width is set at 757px (pic #3)


and, after the first five slides, its left margin changes to -288px. (pic #4).


If I manually change the width in the Inspector to 770px and margin-left to -318px, it displays correctly. (see pic #5).


I have added a new menu item to the site called 'Gallery Protostar' (/gallery-protostar) with the same Slideshowck module displayed. Both are displayed in an article (using Modules Anywhere) with a div of half width (span6 for Protostar which is Bootstrap 3 and col-6 for my template which is Bootstrap 4).

EDIT: I've just noticed that I've been looking on my desktop in Firefox (I find its Inpsector the easiest to use). There is a similar problem in MS Edge but on Chrome it displays correctly, so this makes me think it is possibly a browser CSS conflict.

Does this help?

Also, for some reason, whatever I do, the following options do not work:

1. Thumbnails = 'Yes' does not work if Pagination is also Yes in the 'Options' tab. If this is deliberate, then the tooltip for thumbnails needs to expain this.
2. Putting 640px (or any npx) in the 'Width' field in the 'Options' tab has no effect.
3. In the 'Advanced' tab, selecting a Bootstrap Size to 6, for example, has no effect.

Please Log in or Create an account to join the conversation.

Last edit: by GillianS. Reason: Extra info (see 'EDIT')

Last thumbnail missing 30 Dec 2019 17:21 #54706

I have managed to add some more css to force the container to be 770px wide:
.camera_thumbs_cont div ul { width: 770px !important;}

It's not ideal, but in most cases this now shows the thumbnail for the last image. I have noticed, though, that on a wider screen, the last thumbnail is displayed only until the last image and caption fully appears, at which point it disappears again. If the screen is less than 768px wide, this doesn't happen. N.B. This happens on both my template and Protostar.

Please Log in or Create an account to join the conversation.

Last edit: by GillianS. Reason: extra info.

Last thumbnail missing 30 Dec 2019 19:04 #54708

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24633
  • Karma: 427
  • Thank you received: 3088
yes you must use a such css fix in your case, because the width is calculated in javascript and in this special case the total is not correct because of a css confict.
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Time to create page: 0.322 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 541 guests and 2 members online