Member Avatar for BellaLee

I would like to be able to have rotating images on my website that fade in and out.
As im not very good with a computer i thought i would look some things up on the net.I have tried a few and guess what i couldnt make them work.
Is tere someone here that might be able to help?Remember im not good with a pc.
I do have a website that i built with frontpage and thats how i update.But it does all the work not me.

I would like to be able to do is have a few images on my home page that fade in and out as well as rotating .

If anyone can help??????????????

Thanks in advace

  • 5 Contributors
  • 4 Replies
  • 113 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Building on 's note that the site was made with FrontPage and on and 's comments about different approaches, a lightweight client-side solution is the easiest for someone who doesn't want Flash or server-side setup. The snippet below uses plain HTML + CSS transitions + a few lines of vanilla JavaScript. It can be pasted into the page's HTML/source view in FrontPage (CSS in the head, HTML in the body, JS before </body>).

HTML (place in the page body):

<div id="slideshow" class="slideshow">
  <img src="images/slide1.jpg" alt="Slide 1" class="slide">
  <img src="images/slide2.jpg" alt="Slide 2" class="slide">
  <img src="images/slide3.jpg" alt="Slide 3" class="slide">
  <noscript><img src="images/slide1.jpg" alt="Slide 1"></noscript>
</div>

CSS (place inside <head>):

<style>
.slideshow { position:relative; width:600px; height:400px; overflow:hidden; }
.slideshow .slide { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; transition:opacity 1s ease; }
.slideshow .slide.show { opacity:1; }
</style>

JavaScript (before </body>):

<script>
(function(){
  var s = document.getElementById('slideshow');
  if (!s) return;
  var slides = s.getElementsByClassName ? s.getElementsByClassName('slide') : s.querySelectorAll('.slide');
  if (!slides || slides.length === 0) return;
  function addClass(el,cls){ if((' '+el.className+' ').indexOf(' '+cls+' ')<0) el.className = (el.className+' '+cls).replace(/^\s+|\s+$/g,''); }
  function removeClass(el,cls){ el.className = el.className.replace(new RegExp('(^|\\s)'+cls+'(\\s|$)','g'),' ').replace(/^\s+|\s+$/g,''); }
  var i=0; addClass(slides[0],'show');
  setInterval(function(){ removeClass(slides[i],'show'); i=(i+1)%slides.length; addClass(slides[i],'show'); }, 3000);
})();
</script>

Notes and troubleshooting: set the .slideshow width/height to match images to avoid layout jumps; give each <img> an alt for accessibility; compress images to reduce page load. If FrontPage inserts extra wrappers, save the page and edit the file with a plain text editor then upload. For details on CSS transitions and DOM selection, see MDN: Using CSS transitions and Document.querySelectorAll.

Recommended Answers

All 4 Replies

Member Avatar for aylen

I dont know how to manage my images to please give me information regarding this.
===============
aylen
<URL SNIPPED>

Member Avatar for tomleo

I asked the same question here, and had no help. But since I am trying to do the same thing, I will get back to you if I find something via this forum.

Member Avatar for peter_budo

Option 1) doing it with Flash, require to have Flash software and knowledge of the package. Positive - easy and quickly done. Negative - more images longer time to uploaded flash object on page access

Option 2) doing it with PHP, require to have PHP enabled server and knowledge of PHP. Positive - PHP is free. Negative - you have to know PHP in deep

Option 3) look for some plug-in from pro PHP coder

Member Avatar for MidiMagic

Option 3: Make an animated image. The image doesn't rotate. The contents do.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.