Results 1 to 5 of 5

Thread: Image Thumbnail Viewer II compatible with Videos?!

  1. #1
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II compatible with Videos?!

    1) Script Title: Image Thumbnail Viewer II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    3) Describe problem:

    First of all, I love this script, I already used the 'hover' Thumbnail viewer in a part of my site. Now i was wondering if it's compatible with videos.

    I've created thumbnails from certain videoclips and I want that when someone clicks on a thumb the right video starts playing in the loadarea


    I don't really care if it works with youtube links, or just links from online videofiles, i just can't find a way to still have a working script when i insert an embedded link.

    I hope you guys get my point and are able to help me out here.

    Greeting

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

    Default

    That script is made for images, not videos.
    You might like this. If you do, don't hesitate to ask for explanations:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    
    <title>YouTube Demo</title>
    
    <style>
    body {font-family: arial; font-size: 13px; padding:0px; margin: 0px; background: #dedede; }
    </style>
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://www.youtube.com/player_api"></script>
    
    <script>
    // This part of the script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.
    var controllable_player,
    statechange = function(e){
    	if(e.data === 0){controllable_player.stopVideo()}
    
    };
    function onYouTubeIframeAPIReady() {
    controllable_player = new YT.Player('controllable_player', {events: {'onStateChange': statechange}}); 
    }
    if(window.opera){
    addEventListener('load', onYouTubeIframeAPIReady, false);
    }
    setTimeout(function(){
        if (typeof(controllable_player) == 'undefined'){
            onYouTubeIframeAPIReady();
        }
    }, 3000)
    
    </script>
    
    <script>
    function load_video(url, sstart, eend)
    {
    start=sstart; end=eend;
    maximize();
    $('#the_container').hide(0);$('#the_container').slideToggle(4000)
    document.getElementById('controllable_player').style.height='100%';
    if(controllable_player.unMute)setTimeout("controllable_player.unMute()",100);
    uurl=url; 
    setTimeout("if(controllable_player.loadVideoById){controllable_player.loadVideoById('IBRqwnGferM', 0, 'large')}",0)
    setTimeout("controllable_player.loadVideoById({'videoId': uurl, 'startSeconds': start, 'endSeconds': end, 'suggestedQuality': 'large'})",6000)
    document.getElementById('stop').style.display='block'
    document.getElementById('info').style.display='block'
    document.getElementById('info').innerHTML=info
    }
    
    function load_playlist(url_playlist)
    {
    maximize();
    $('#the_container').hide(0);$('#the_container').slideToggle(4000)
    document.getElementById('controllable_player').style.height='100%';
    
    if(controllable_player.unMute)setTimeout("controllable_player.unMute()",100);
    uurl_playlist=url_playlist; 
    setTimeout("controllable_player.loadVideoById('IBRqwnGferM')",0); 
    setTimeout("controllable_player.loadPlaylist(uurl_playlist)",6000);
    setTimeout("controllable_player.setPlaybackQuality('large')",6000)
    document.getElementById('stop').style.display='block'
    document.getElementById('info').style.display='block'
    document.getElementById('info').innerHTML=info
    }
    
    function unload_video()
    {$('#the_container').slideToggle(3000)
    if(controllable_player.seekTo)controllable_player.seekTo(0);
    if(controllable_player.stopVideo)controllable_player.stopVideo();
    if(controllable_player.mute)controllable_player.mute();
    setTimeout("if(controllable_player.pauseVideo)controllable_player.loadVideoById('IBRqwnGferM')",3950)
    document.getElementById('stop').style.display='none'
    document.getElementById('info').style.display='none'
    }
    
    function maximize()
    {
    document.getElementById('the_container').style.left='240px';
    document.getElementById('the_container').style.top='10%';
    document.getElementById('the_container').style.right='160px';
    document.getElementById('the_container').style.bottom='20%';
    }
    </script>
    
    </head>
    
    <body >
    
    <div style="position: absolute; left: 240px; top: 10%; right: 160px; bottom: 13%; background: #333232; color: white; ">
    <div style="position: absolute; top: 50%; left: 50%; margin-left:-80px">Select a video at the left</div>
    </div>
    
    <div style="position: relative; top: 10px; text-align: center; font-size:30px">YouTube Demo</div>
    
    <div id="the_container" style="display:none;position: absolute; left:140px; top: 140px; right: 140px; bottom: 140px; z-index:20; border: 0px solid red"><div style="position:absolute;z-index:8; width: 100%; height:0px; margin-top: 2px"><div id="stop" style="float: right; background: darkred; color: white; font-family: verdana; font-size: 14px; font-weight: bold; cursor: pointer" onclick="unload_video()">&nbsp;X&nbsp;</div></div><div id="info" style="background:darkred; border: 0px solid silver; border-right: 0px;border-bottom: 0px; width: 100%; color: white; position: absolute; z-index:7; height:50px; text-align: center; padding-top: 10px; padding-bottom: 5px; font-family: arial; font-size:12px;overflow: auto">No info about video</div><br><br><br><iframe id="controllable_player" name="controllable_player" style="position: absolute; height: 100%; width: 100%;z-index:20" src="http://www.youtube.com/watch_popup?v=IBRqwnGferM&amp;vq=large" frameborder="0"></iframe></div>
    
    <div style="position: absolute; left: 20px; top: 50%; margin-top: -200px; ">
    
    <div style="position:relative; ">
    <img src="http://i3.ytimg.com/vi/YpX9eFhV6kg/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Homo habilis';load_video('YpX9eFhV6kg')">
    </div>
    
    <div style="position:relative; ">
    <img src="http://i3.ytimg.com/vi/WVSbl-sNi5Y/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Homo heidelbergensis (in German)<br>Starts at 50 secs, plays for 100 secs';load_video('WVSbl-sNi5Y', 50,150)">
    </div>
    
    <div style="position:relative; ">
    <img src="http://i3.ytimg.com/vi/sHy9FOblt7Y/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='The Neanderthal Flute';load_video('sHy9FOblt7Y')">
    </div>
    
    <div style="position:relative; ">
    Playlist:<br>
    <img src="http://i3.ytimg.com/vi/ZRfWU-ZpLZ8/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Playlist';load_playlist('YpX9eFhV6kg,WVSbl-sNi5Y,sHy9FOblt7Y')">
    </div>
    
    </div>
    
    
    </body>
    
    </html>

  3. #3
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey,

    thanks for the fast reply, I think I can use this one in stead yes.

    Only one question, is there a way to 'delete' the effect when a video is loading? I mean the scrolling down from the top. Or to change that into a small fade from black to the actual video?

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

    Default

    In function load_video and function load_playlist you could do
    Code:
    $('#the_container').hide(0);$('#the_container').fadeIn(4000)
    instead of
    Code:
    $('#the_container').hide(0);$('#the_container').slideToggle(4000)
    In function unload_video it might be better to replace
    Code:
    $('#the_container').slideToggle(3000)
    with:
    Code:
    $('#the_container').hide(4000)
    Last edited by molendijk; 09-13-2013 at 10:37 PM. Reason: Adding possible effects

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

    Default

    Forget about my previous post if you don't want youtube to show suggested videos at the end. Use this instead:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    
    <title>YouTube Demo</title>
    
    <style>
    body {font-family: arial; font-size: 13px; padding:0px; margin: 0px; background: #dedede; }
    </style>
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://www.youtube.com/player_api"></script>
    
    <script>
    // This part of the script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.
    var controllable_player,
    statechange = function(e){
    	if(e.data === 0){controllable_player.stopVideo()}
    
    };
    function onYouTubeIframeAPIReady() {
    controllable_player = new YT.Player('controllable_player', {events: {'onStateChange': statechange}}); 
    }
    if(window.opera){
    addEventListener('load', onYouTubeIframeAPIReady, false);
    }
    setTimeout(function(){
        if (typeof(controllable_player) == 'undefined'){
            onYouTubeIframeAPIReady();
        }
    }, 3000)
    
    </script>
    
    <script>
    function load_video(url, sstart, eend)
    {
    start=sstart; end=eend;
    maximize();
    //$('#the_container').hide(0);$('#the_container').slideToggle(4000)
    $('#the_container').fadeIn(4000)
    document.getElementById('controllable_player').style.height='100%';
    if(controllable_player.unMute)setTimeout("controllable_player.unMute()",100);
    uurl=url; 
    setTimeout("if(controllable_player.loadVideoById){controllable_player.loadVideoById('IBRqwnGferM', 0, 'large')}",0)
    setTimeout("controllable_player.loadVideoById({'videoId': uurl, 'startSeconds': start, 'endSeconds': end, 'suggestedQuality': 'large'})",6000)
    document.getElementById('stop').style.display='block'
    document.getElementById('info').style.display='block'
    document.getElementById('info').innerHTML=info
    }
    
    function load_playlist(url_playlist)
    {
    maximize();
    //$('#the_container').hide(0);$('#the_container').slideToggle(4000)
    $('#the_container').fadeIn(4000)
    document.getElementById('controllable_player').style.height='100%';
    
    if(controllable_player.unMute)setTimeout("controllable_player.unMute()",100);
    uurl_playlist=url_playlist; 
    setTimeout("controllable_player.loadVideoById('IBRqwnGferM')",0); 
    setTimeout("controllable_player.loadPlaylist(uurl_playlist)",6000);
    setTimeout("controllable_player.setPlaybackQuality('large')",6000)
    document.getElementById('stop').style.display='block'
    document.getElementById('info').style.display='block'
    document.getElementById('info').innerHTML=info
    }
    
    function unload_video()
    {
    //$('#the_container').slideToggle(3000)
    $('#the_container').hide(4000)
    if(controllable_player.seekTo)controllable_player.seekTo(0);
    if(controllable_player.stopVideo)controllable_player.stopVideo();
    if(controllable_player.mute)controllable_player.mute();
    setTimeout("if(controllable_player.pauseVideo)controllable_player.loadVideoById('IBRqwnGferM')",3950)
    document.getElementById('stop').style.display='none'
    document.getElementById('info').style.display='none'
    }
    
    function maximize()
    {
    document.getElementById('the_container').style.left='240px';
    document.getElementById('the_container').style.top='10%';
    document.getElementById('the_container').style.right='160px';
    document.getElementById('the_container').style.bottom='20%';
    }
    </script>
    
    </head>
    
    <body >
    
    <div style="position: absolute; left: 240px; top: 10%; right: 160px; bottom: 13%; background: #333232; color: white; ">
    <div style="position: absolute; top: 50%; left: 50%; margin-left:-80px">Select a video at the left</div>
    </div>
    
    <div style="position: relative; top: 10px; text-align: center; font-size:30px">YouTube Demo</div>
    
    <div id="the_container" style="display:none;position: absolute; left:140px; top: 140px; right: 140px; bottom: 140px; z-index:20; border: 0px solid red"><div style="position:absolute;z-index:8; width: 100%; height:0px; margin-top: 2px"><div id="stop" style="float: right; background: darkred; color: white; font-family: verdana; font-size: 14px; font-weight: bold; cursor: pointer" onclick="unload_video()">&nbsp;X&nbsp;</div></div><div id="info" style="background:darkred; border: 0px solid silver; border-right: 0px;border-bottom: 0px; width: 100%; color: white; position: absolute; z-index:7; height:50px; text-align: center; padding-top: 10px; padding-bottom: 5px; font-family: arial; font-size:12px;overflow: auto">No info about video</div><br><br><br><iframe id="controllable_player" name="controllable_player" style="position: absolute; height: 100%; width: 100%;z-index:20" src="http://www.youtube.com/watch_popup?v=IBRqwnGferM&amp;vq=large" frameborder="0"></iframe></div>
    
    <div style="position: absolute; left: 20px; top: 50%; margin-top: -200px; ">
    
    <div style="position:relative; ">
    <img src="http://i3.ytimg.com/vi/YpX9eFhV6kg/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Homo habilis';load_video('YpX9eFhV6kg')">
    </div>
    
    <div style="position:relative; ">
    <img src="http://i3.ytimg.com/vi/WVSbl-sNi5Y/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Homo heidelbergensis (in German)<br>Starts at 50 secs, plays for 100 secs';load_video('WVSbl-sNi5Y', 50,150)">
    </div>
    
    <div style="position:relative; ">
    <img src="http://i3.ytimg.com/vi/sHy9FOblt7Y/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='The Neanderthal Flute';load_video('sHy9FOblt7Y')">
    </div>
    
    <div style="position:relative; ">
    Playlist:<br>
    <img src="http://i3.ytimg.com/vi/ZRfWU-ZpLZ8/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Playlist';load_playlist('YpX9eFhV6kg,WVSbl-sNi5Y,sHy9FOblt7Y')">
    </div>
    
    </div>
    
    
    </body>
    
    </html>

Similar Threads

  1. Replies: 4
    Last Post: 02-09-2013, 08:55 PM
  2. Image Thumbnail Viewer II - Option for thumbnail?
    By doriggidy in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-11-2012, 12:45 AM
  3. Image Thumbnail Viewer II Active Thumbnail on Slideshow? (help please) :)
    By SoulieBaby in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-11-2008, 12:41 AM
  4. Lightbox Image Viewer for Videos
    By tonto11 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-24-2008, 12:02 PM
  5. Image Thumbnail Viewer - unwanted border around thumbnail images
    By solder_on in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-23-2007, 11:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •