0

My first post, so apologies if the formatting is bad.

I have a project where I'm attempting to create a slideshow using Javascript. I've placed the images into an array and got the slideshow running.

The problem I'm facing is that the images are much larger than the viewport. I've looked at this post as well as this post and many others. They address the issue of re-sizing, but not for images in arrays or the solution requires adding an image to the HTML, which is not what I'm trying to do. I've attempted to use CSS, but it does not work and adding lines in the javascript using

$("#libImage").style.width = '50%';
$("#libImage").style.height = 'auto';

only changes the size of what you can see of the image, not the image itself. Is this even possible for what I'm trying to do and if so, what and where should I use it get the results that I want?

Thank you very much for the help.

HTML

<div id="libImage"></div>

Javascript

var images = ["../images/lib-orange.jpg", "../images/lib-main.jpg", "../images/lib-powel.jpg", "../images/lib-ostrander.jpg"];

    $(function () {
        var i = 0;
        $("#libImage").css("background", "url(images/" + images[i] + ")");
         setInterval(function () {
            i++;
            if (i == images.length) {
                i = 0;
            }
            $("#libImage").fadeOut("slow", function () {
                $(this).css("background", "url(images/" + images[i] + ")");
                $(this).fadeIn("slow");
            });
        }, 3000);
    });

Thanks for the response, sorry for the delay. Its not the same effect that I got, but its the same problem. The pictures are not showing up scaled to the size of the viewport.

https://jsfiddle.net/e6ywm5j2/5/

Pavan Kumar Jorrigala
  • 3,085
  • 16
  • 27
GCPChung
  • 3
  • 3
  • Can you provide a working example please. I'm a bit confused about the resizing you're trying to do. You want to resize the actual image and display the newly resized image? Or just make it fit the box? – CJdriver Feb 16 '18 at 16:52
  • @CJdriver I would like to have the images fit whatever size the viewport is. So yes, resize the images and then display the images based on the size of the viewport. Again, thanks for the reply. – GCPChung Feb 16 '18 at 21:09
  • `div { width: 100%; height: 100vh; }` should fix the problem [link](https://stackoverflow.com/a/33093740/4891892) – Pavan Kumar Jorrigala Feb 16 '18 at 21:35
  • Hi @PavanKumarJorrigala , I've tried that before and it fits the container to the viewport, but not the image. https://jsfiddle.net/e6ywm5j2/20/ updated – GCPChung Feb 16 '18 at 21:47

1 Answers1

0

Instead of background: url() I used img tag

<div id="libImage"><img src="" ></div>

and replace $("#libImage").css("background", "url(images/" + images[i] + ")"); with $("#libImage img").prop("src", images[i]);

And css changes are:

div { width: 100%; height: 100vh; text-align: center; }

img {
  max-height: 90%;
  max-width: 90%;
}

Demo

Pavan Kumar Jorrigala
  • 3,085
  • 16
  • 27