PDA

View Full Version : More than one Gif Player on a web page



Ripsaw
01-03-2016, 03:15 PM
Thank you firstly Beverlyh for your Animated Gif Player script http://www.dynamicdrive.com/forums/entry.php?324-On-Demand-Animated-GIF-Player-to-reduce-page-load It is just what I was looking for.

What I wanted to ask is how can I have more than one script on the page for Gifs that have different filenames?

Do I need to use the script block multiple times at the bottom of the page, for every time a new Gif Player loads?

Beverleyh
01-03-2016, 03:34 PM
No that isn't necessary. Just include the one complete block of script (everything between the <script> ... </script> tags from the demo page http://fofwebdesign.co.uk/template/_testing/video/gif-player.htm) and it will work will multiple GIF Player markup instances.

Ripsaw
01-03-2016, 04:47 PM
Thanks for replying.

But if the script block is only used once, I'm not certain how I should make it 'talk' to the script so that it sees different Gifs. Do I put all the my-animation.gifs (and it's right hand png) into different folders or will the script just 'know'?

Beverleyh
01-03-2016, 04:59 PM
You can put all of your gif and png files into different folders if the structure makes it more logical for you but you can also put them all in to the same folder if the are related - the script will know what to do.

Ripsaw
01-03-2016, 05:04 PM
I'm a little confused. If all the files are called 'my-animation.gif' I won't be able to upload them in the same folder. I guessed I was suppose to upload to different folders to get around this problem. Have I misunderstood?

Beverleyh
01-03-2016, 05:09 PM
Ok I think I see where the confusion came from. The tutorial and demo both reference files called "my-animation.png" and " my-animation.gif", but these are just examples. They can actually be called anything as long as they stay in their gif and png same-name pairs. So you could have;

- "cat.png" and "cat.gif"
- "hamster.png" and "hamster.gif"
- "playing-football.png" and "playing-football.gif"

All they can all be saved into the same folder.

Ripsaw
01-03-2016, 05:14 PM
Ok thank you. Just curious but where in the script makes this possible?

Beverleyh
01-03-2016, 05:19 PM
That would be the lines that look like this;
img.src.replace(/\.[^/.]+$/, "") + '.gif';the expression in the brackets takes the file name (any file name) and then changes the extension to a gif or png depending on whether its playing or stopping the animation in the player.

Ripsaw
01-03-2016, 05:23 PM
Excellent. Thank you again and great work on this awesome script!

Beverleyh
01-03-2016, 05:23 PM
No problem. You're welcome :)

Ripsaw
01-10-2016, 06:02 PM
Apologies for raising the topic once more but I was wondering if there is a limit to the Gif size used in the Gif Player?

Beverleyh
01-10-2016, 07:40 PM
No limit, either with the physical dimensions (the play/pause/loading spinner icons are self-centering) or the file size.

Why do you ask?

Ripsaw
01-10-2016, 08:33 PM
Sorry I should have specified that I meant file size. I am having a problem with some of the larger Gifs playing smoothly and at the wrong speed.

Beverleyh
01-10-2016, 08:47 PM
I don't think that's the script. Try embedding the large gif in your web page in a standard <img> tag and compare how it behaves to when it's in the player. Playback of gifs differs between browsers too.

Ripsaw
01-11-2016, 06:23 PM
You are correct: the Gif embedded in straight <img> code behave exactly the same way. Do you know any way I can improve matters?

Beverleyh
01-11-2016, 06:40 PM
Maybe try to make the file size smaller. Depending on what software you're using you might be able to delete frames (or re-compile at fewer frames per second) and reduce the colour palette. If there are any transparent regions, block them out with a solid colour.

Hope that helps

Ripsaw
01-11-2016, 07:05 PM
That is helping. Thank you very much for your help again :)

Beverleyh
01-11-2016, 07:25 PM
No problem :)