Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Answered Gap between image and border on slideshow

Hello,

I'm very new to web development/html/css/javascript, and I'm trying to make a slideshow that dissolves from one image to the next, adapted from this tutorial.

One problem I have is that the images in my slideshow are different formats (height and width), so, for example, the sides of wider images stick out from behind thinner images on top.

My attempted solution was to dynamically add white borders to each image so that, with the borders added, they are all the same size. This seems to work on firefox, but on chrome, there's a tiny (1 pixel?) gap between the border and the image, where you can see the image behind.

Here is a redux version with just two images in the slideshow, one blue and one red, with the border in yellow for visibility. In firefox, the red and blue images alternate nicely, but in chrome, when the (thinner) blue image is shown, I can see the red image through the gap between the blue image and the yellow border (I only saw the effect when I zoomed the page to 110% by pressing Ctrl+, and possibly reloading it once or twice):
badSlideshow.jpg



I thought of using Photoshop to pre-pad the images to already have borders so they are the same size, but I thought having the images dynamically padded within the website would allow for more flexible layout for different screen formats (eg. landscape vs. portrait).

Any help appreciated! Also open to totally different ways of creating a crossfade slideshow.

Thanks,

Jeremy.

CODE:

Code:
<html>
<style type="text/css">
  #stage canvas {
    position: absolute;
    transform: translateX(-50%);
  }

  #stage a {
    position: absolute;
    transform: translateX(-50%);
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 1s;
    animation-duration: .3s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

  img.slideshow {
    height: 600px;
  }
</style>

<body>


<div align=center id="stage">
    <canvas width="10vw" id="myCanvas"></canvas>
<a href=""> <img class="slideshow" src="images/blue.jpg"></a>
<a href=""> <img class="slideshow" src="images/red.jpg"></a>
</div>

</body>

<script>
  window.addEventListener("DOMContentLoaded", function(e) {

    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");

    for(var i=0; i < arr.length; i++) {
      var img = arr[i].getElementsByTagName("img");

      var border = ((document.documentElement.clientWidth - img[0].height) * .5) + "px solid yellow";

      img[0].style.borderRight = border;
      img[0].style.borderLeft = border;

      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

</script>
</html>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom