cdlciddit

asked on 5/9/2018

Convert flash slideshow to HTML5 or CSS

Hello. Can someone tell me the best way to replace a flash slide show with something a little more standard like CSS or HTML5? I have this site https://www.fragilexregistry.org/ . If you view it in the 3 major browsers (IE, Chrome, and Firefox) you will notice the image on the top left displays in all except Chrome. I know flash is being phased out so I would like to just use something different. Any suggestions and/or tutorials on what I can do?

CSSHTMLChromeWeb Browsers

Last Comment

Scott Fell

8/22/2022 - Mon

Scott Fell

5/9/2018

From the code on your site

function showVideo(ytId) {
    var ytUrl = "http://www.youtube.com/v/" + ytId + "?enablejsapi=1&version=3"
    swfobject.embedSWF(ytUrl, "ytplayer", "640", "360", "8", null, null, { allowScriptAccess: "always", wmode: "transparent" }, { styleclass: "swfobject loading" });
    var modalPopupBehavior = $find("videoModalBehavior");
    modalPopupBehavior.show();
}
function hideVideo() {
    if (ytp) {
        ytp.stopVideo();
    }
    var modalPopupBehavior = $find("videoModalBehavior");
    modalPopupBehavior.hide();
}
function onYouTubePlayerReady(playerId) {
    ytp = document.getElementById("ytplayer");
    $("#ytplayer").removeClass("loading");
    if (ytp) {
        ytp.playVideo();
    }

Open in new window

It looks like you are playing youtube videos. Simply get the embed code from youtube.
Go to the video, click share, then embed and you get something like this

<iframe width="560" height="315" src="https://www.youtube.com/embed/Lky5M_zmEwU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Open in new window

You can paste the code you get from youtube to your site where the video belongs.

Julian Hansen

5/9/2018

There are many carousel libraries that will do this for you. You can't convert from Flash to HTML / CSS directly - you would need to do the slog work to do it.

Owl Carousel is an example of a library. (https://owlcarousel2.github.io/OwlCarousel2/)
You can also do your own
CSS

<style>
.icon-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.icon-container img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.icon-container img:first-child,
.icon-container img:nth-child(2) {
  display: block;
}
.icon-container img:first-child {
  position: relative;
  z-index: 100;
}
</style>
HTML
[code]<div class="icon-container">
  <img src="images/background2.jpg" />
  <img src="images/background3.jpg" />
  <img src="images/background4.jpg" />
  <img src="images/background5.jpg" />
  <img src="images/background6.jpg" />
</div>

Open in new window

jQuery

<script>
$(function() {
  var container = $('.icon-container');
  setInterval(function() {
    $('img:first-child').fadeOut(1000, function() {
      $(this).appendTo(container).attr({style: ''});
    })
  }, 3000);
});
</script>

Open in new window

Working sample here

cdlciddit

5/10/2018

ASKER

Hello @Scott Fell. Thanks for the response. But actually the image in the corner is a javascript slideshow function that just displays a random picture from a directory of pictures. I want to get rid of that and use something a little more standard and new. Maybe HTML5 or CSS?

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

cdlciddit

5/10/2018

ASKER

Hello @Julian Hansen. Thanks for your answer. That was very helpful. I didn't even think of Jquery. I figured Javascript would be too difficult for me. But I'm going to try it and get back to you with the results.

cdlciddit

5/16/2018

ASKER

Hello @Julian Hansen. I tried using slick carousel. But I couldn't get it to work with my .net aspx pages. So I ended up just doing a javascript swap image. I think slide show would look much better but I can't seem to get anything to work right in .net.

Julian Hansen

5/16/2018

.Net is not the issue - .Net produces an HTML page on which JavaScript will act - how it was built is irrelevant - the only thing you need to ensure is that the right markup is created on the page and the right JavaScript libraries / code is included.

If you look at my code above - that is a perfectly acceptable slideshow based on what you have already. All you need to do is create a list of images inside a div with a class.
Include the CSS above with .icon-container changed to whatever class you used for the div.
Include the jQuery library and that small snippet of jQuery code (remember to set the class to the same as the div) - and it should work.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

cdlciddit

5/16/2018

ASKER

Ok. I guess I need to be a little clearer. I know .net isn't he problem. It's my knowledge of .net that's the problem. I'm using Master pages so my content pages don't include any html <head>or <body> tags. So I don't know where to place the script tags for the stuff I want to do.

Julian Hansen

5/16/2018

Ok, I see.

Do you have a stylesheet for your application?
If so just add the CSS above the stylesheet.
Then make sure that the jQuery <script> is in your Masterpage <head> section
Finally add the jQuery <script> above to your page where your carousel is. If it appears on every page then it goes in the Master otherwise it goes on the child page.

Setup your slide show as per the <div class="icon-container"> above.

cdlciddit

5/16/2018

ASKER

Ok. Thanks. I will try that. I'm just unsure where I can put the scripts on the child pages. B'c the only <script> tags that will work on the child pages have to have the runat attribut set to server. Otherwise I get errors and the page won't load.
I found out that all scripts go into the <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> section of a .net website using Master Pages and web forms.

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

ASKER CERTIFIED SOLUTION

Julian Hansen

7/30/2019

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

cdlciddit

7/31/2019

ASKER

Ok. If you think this is helpful then I will leave it. I will see if I can edit the last comment to make this more helpful. You helped me out a lot on that project and I ended up abandoning it because I couldn't get it to work. I am a complete newbie to programming. I don't do it a lot but when I do I have no idea what i'm doing. Since then I have figured out where to put the scripts and I want to add that to the last comment.

cdlciddit

1/16/2020

ASKER

Can I close this question without deleting it? None of the answers were what I was looking for but they may help others.

cdlciddit

1/16/2020

ASKER

All the input was extremely helpful and directed me to the answer I was looking for. Thank you all for your help.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Scott Fell

1/16/2020

Just saying you are done with the question is enough and marking any comment as helpful too.