Hi Chris, can you share your URL?
Thank you
Hi!
Sorry for the delay, page was actually not online then. Here is the link:
http://arqnorm.com/
It’s right the slideshow on the start page and its white borders. When I look into the html code the widths’ of either the container and the image appear to be ‘hardcoded’, i.e. I guess they are set via some java-script right?
Regards
Chris
Hi Chris, I have checked the link you provided above. I cannot see any white margins on the left or right hand side of the slideshow. I checked two different browsers, Google Chrome and Firefox.
Do you still see the white margins yourself?
Hi!
I still the margins. I have tested it with firefox, chrome, edge and IE11. Unfortunately I cannot post a screen shot here, but I’ll try to describe better what I want it to look like.
The displayed images are supposed to fill the whole screen width when they are ‘standing still’.
Cheers
Chris
Hi Chris, are you talking about the wrapper “Body” width of your website? Or are you talking about the screen width which is wider than the website body width? So if the screen is 1024 px in width the images should have the exact width.
Hi!
Actually none of the both. The body is (at the moment) configured to have no border (maybe it had a border when you looked, I was manipulating the site a bit). The point is really a white margin within the slideshow ‘code’. If I look at the html code of the slideshow, it looks like follows:
<div style="margin-left: 0px; margin-right: 0px; width: 937px; height: 351px;" class="slideshow_slide slideshow_slide_image">
<img style="margin-left: auto; margin-right: auto; display: block; width: 842px; height: 351px;" src="http://arqnorm.com/wp-content/uploads/2016/06/urbano-zero-energia.jpg" alt="meio urbano zero energia" height="351" width="842">
There is the slideshow ‘container’ (class(es): slideshow_slide slideshow_slide_image) which has a width of 937px, inside there are the images which have a width of 842px. Thus giving a difference of 95px and a white margin of approximately 47px on each side, which is the margin I am talking about.
The white margin is ‘normally’ used for the left and right buttons of the slideshow, which in my case are turned off. Anyway I cannot use this space to extent the images to full width.
Best regards
Chris
Hi Chris there are many online websites that allow you to share images. Please share a screen dump with arrows pointing to what you are referring to.
Thank you
Hi Chris, those images confirm what I commented above.
First you should not be logged in while viewing the slideshow. It is always best to troubleshoot some cosmetic adjustments within a theme or plugin.
Also the width is controlled by your theme. Another words the plugin will always maintain a width based on the themes wrapper or body width. Try and increase your themes body width and you will see how the slideshow will accommodate the new width and adjust itself.
Hi again!
Sorry, but your reply is wrong! The problem is NOT the body width which is 100vw. Please check this image, to make it 100% clear to you:
http://arqnorm.com/img/SlideShow_StillWhiteMargins.jpg
The problem is in the resize function of the plugin. If you check the other images where the containers are marked by the browser tool you can it see also, that the slideshow container is 100vw.
Cheers
Chris
Hi!
I did some research in the source code – which was a bit tedious as I had to use the minimized version. The reason the image does not extent to the full width is the calculation of the image / container size ratios (slideshow.calculation.js, line 293 ff):
slideDimension = $slide.width() / $slide.height();
imageDimension = (naturalWidth + imageAbsoluteOuterWidth) / (naturalHeight + imageAbsoluteOuterHeight);
Which in my case causes them image width to be recalculated as
(slideshow.calculation.js, line 343):
width : Math.round(maxImageHeight * imageDimension),
though, as you can see on the screen shots it would be possible to stretch the image to the full width of
<div clas="slideshow_slide slideshow_slide_image" ... >
What I did not figure out so far is, where the height used for the calculation is set. But when the page is loaded it can be seen shortly, that the image is scaled to full site width before the javascript rescales the image.
Maybe this helps finding a solution,
cheers
Chris
Thank you Chris for your wonderful and extensive information. The plugin developer will investigate further your issue.
Kind regards
Sorry I failed, my aim was to make a pull request 😉 If I can help any further just let me know.
Thanks a lot for your attention!!
Cheers Chris
It’s me again, hope you aren’t sick already.
I guess I found out what happens:
Again in slideshow.calculation.js, about line 66:
var height = (width * this.settings['dimensionHeight']) / this.settings['dimensionWidth'];
There is the height set according to the aspect ration given in the settings, which is then later on used to calculate the width. From my point of view, either document this behavior very clear as intentional or add another option: ‘free scale to width’
For me this thread can be closed – I leave it up to you (or give me a note in case I have to do so).
Best regards
Chris
Hi Chris, you can close this thread. If you run into another issue, you can always open up a new thread.
Kind regards
