We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

A good way to do the slideshow | Forum

dave Leader
dave Jun 7 '13



If you have the slideshow you might notice that the size is pretty narrow (height) for most people.   After working on making it taller i discovered a few things about it. 


First from what i experienced and discovered, changing the css does not really change things regarding size, you can get little changes this way and i did get a bigger window until i started loading images, and this is how i finally discovered how this thing works.  So no css changes are required.


The size of your slide window is done  using a math algorithm to average the width and height.  The width seems to make a huge difference on the size of the window widget (part of the code the result is divided by 2). After playing around with this i finally figured that to get  half way decent size and keep the clarity of the images you need to use a 400 w  x  500 h  image.


But there is more to it than that.  Lets say that you take a simple image that is 400x500 and stick it in there, there are times that the image is distorted or that the top or bottom of the image is cut off.   So some might think lets try a 600x600 image as i did, its even more cut off and does not work that way.


What i found to work best is a 400 x 500 image but doing the image in a special way.   And here is how.  


I took my images and left the smaller ones pretty much the same size as they were,  for example 300x400  then i opened them in photoshop and i added another layer in the background which was 400x500 then depending on my theme color i either left new background transparent or i colored it black.


The larger images i just made a background alittle bigger than they were and colored that as well or left it transparent.  (making sure the width was no smaller than 400 regardless)


And its amazing what happens to the slider window.   All of a sudden my slider window went from 220 h  to  360 h and the images look clear as a bell.   You can see the entire content of the image and it looks great.  Perfect size.


At one time i did have it taller about 500 but as you add images the window will also average and again you will notice that even if you have 5 images at 400x500 and you stick an image in there that is 300x500 the window shrinks big time, so width matters.


So the way i did it with the background works perfect and offsets that.   Do i know why exactly, no.  Because i am not a js or jquery master but i have figured out how to make it look great and i wanted to share.


happy coding :)

The Forum post is edited by dave Jun 8 '13
new Jun 7 '13
I guess,  put it on "sticky" so that one need not to search much for it.
Darryl B Leader
Darryl B Mar 27 '15
Glad I found this. I was hoping I could find something to keep the images from being cut off. I just tried it out by setting all of the images the same size, and boom!!! the slider window changed. The background size set to the same setting will help for smaller pics. The window will size to the to the background. Essentially what you are doing is standardizing the image size that you will be displaying in the slider. ex. if you set all images to 400w x 200h, that's the size the slider window will be.
dave Leader
dave Mar 28 '15
glad to have helped :) 
fiamma Apr 12 '17

my widget for Slideshow with two images with the equal sizes (wxh) shows the cropped images (See screenshots).

Please any suggestions?

The Forum post is edited by fiamma Apr 12 '17
dave Leader
dave Jun 29 '17
Try reducing the size of the image. 
Graphkat Aug 10 '18

Yes, I noticed when adding pics to the slideshow, it really depends on width. if you have different sizes uploaded, it will throw your window size off again. I convert all images that I upload to the same size for the slideshow. Smaller than the actual window, then if you have more square photos compared to a 16:9, it seems to help it keep its original format. I use a Batch Picture Converter, 350w x 250w, original aspects checked.

Works nicely, https://organicveil.net

dave Leader
dave Aug 10 '18
OH you found it kat lol.... i just commented in PM and was gonna find this for you... but your wayyyyyy ahead of me.... good job  :)