How to display multiple images on mouse hover on php

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    How to display multiple images on mouse hover on php

    i am writing a php download portal script. i want to add multiple images as thumbnail on mouse hover. just like this http://www.urokitv.ru when i put mouse on a video, its showing pictures from a folder serially. 1.jpg then 2.jpg then 3.jpg then 4.jpg .... now i want to do that on a php for my script. suppose my file name is myfile.ext so i put thumbnail for this file on thumb folder. so my code for display this on page is

    now i want to show thumbnails one by one when mouse hover on it. i want to show more then one picture on mousehover. How can i show multiple images on mouse hover in php? i dont know how to ask much better a question, if my question is not enough specific.
    Tags: css, html, php
    #2
    With Php alone this is impossible, so you would need some javascript/jquery... Something like This should help you.

    Remember to include jquery library in with this or it won't work:
    Code:
    <html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
$(function() {
    $('img').on('mouseover', function() {
        var self = this,
            i = 0,
            images = $(this).data('mouseover').split(/\s+/);

        (function nextImage() {
            var next = images[i++ % images.length].split('#');
            $(self).data('timeout', setTimeout(function() {
                self.src = next[0];
                nextImage();
            }, next[1] || 200));
        })();

    }).on('mouseout', function() {
        clearTimeout($(this).data('timeout'));
        this.src = $(this).attr('src');
    });
})
</script>
</head>
<body>
<img src="http://lorempixel.com/100/100/food/1" data-mouseover="http://lorempixel.com/100/100/food/2 http://lorempixel.com/100/100/food/3 http://lorempixel.com/100/100/food/4" />
</body>
</html>
    • Likes 1

    Comment

      #3
      Simple and nice codes. i like to use this. but while i test it, its not loading smoothly. all time i tried it, its not loading as i want or showing on http://www.urokitv.ru/. please can you make sure its loading smoothly every time.

      Comment

        #4
        That script isn't mine - although there is more versions of the same script: http://jsfiddle.net/e2j1a6vt/ which seem to be smoother

        Comment

          #5
          Originally posted by bdspice View Post
          Simple and nice codes. i like to use this. but while i test it, its not loading smoothly. all time i tried it, its not loading as i want or showing on http://www.urokitv.ru/. please can you make sure its loading smoothly every time.
          why dont you use/"steal" the javascript from that site?
          Code:
          http://www.urokitv.ru/js/KernelTeamImageRotator.js?v=3.8.1
          usage:
          HTML Code:
          <img class="thumb" itemprop="contentUrl" src="http://www.urokitv.ru/contents/videos_screenshots/6000/6396/240x180/1.jpg" alt="" onmouseover="KT_rotationStart(this, 'http://www.urokitv.ru/contents/videos_screenshots/6000/6396/240x180/', 5)" onmouseout="KT_rotationStop(this)"/>
          and check the function:
          HTML Code:
            KT_rotationStart(image, urlPrefix, thumbCount, thumbExt)
          Advertise your mobile site for FREE with AdTwirl

          • Likes 1

          Comment

            #6
            The script from the urokitv is in javascript rather than jquery . so you don't need to include jquery library.

            How ever you will also need other elements such as:
            onmouseout="KT_rotationStop(this)"
            in your html to stop the rotation when you move your mouse off the object that you wish to stop its rotation

            and more javascript:
            Code:
            <script type="text/javascript" src="http://www.YOURsite.Con/js/KernelTeamImageRotator.js?v=3.8.1"></script>
<script type="text/javascript">
        KT_rotationEngineStartup(0.2, 0.5);
    </script>

            Comment

              #7
              Originally posted by GumSlone View Post

              why dont you use/"steal" the javascript from that site?
              Code:
              http://www.urokitv.ru/js/KernelTeamImageRotator.js?v=3.8.1
              I am intended to use this on commercial purpose, so i dont think stealing would be a good things.because they(kvs) use it for commercial purpose only. and in other hand, i have undefined number of images. while i release whole script for users, users may upload 2 or 3 or 6 or 9 images as screenshot.which going to be use on this line.so i can;t fixed number to "5" or something else as you mentioned. that's why i liked they way something else provide code.
              so i am going to use something like this:
              PHP Code:
              $filepre = ''.$br.'/filethumb/'.$name.'.jpg';
              $filess = ''.$br.'/ss/'.$name.'.jpg';
              $filess1 = ''.$br.'/ss/'.$name.'1.jpg';
              $filess2 = ''.$br.'/ss/'.$name.'2.jpg';
              $filess3 = ''.$br.'/ss/'.$name.'3.jpg';
              $filess4 = ''.$br.'/ss/'.$name.'4.jpg';
              $filess5 = ''.$br.'/ss/'.$name.'5.jpg';
              $filess6 = ''.$br.'/ss/'.$name.'6.jpg';
              $filess7 = ''.$br.'/ss/'.$name.'7.jpg';
              $filess8 = ''.$br.'/ss/'.$name.'8.jpg';
              $filess9 = ''.$br.'/ss/'.$name.'9.jpg';

              if (              file_exists($filess)) { $filss = ''.$filess.'';} else {$filss = '';}
              if (              file_exists($filess1)) { $filss1 = ''.$filess1.'';} else {$filss1 = '';}
              if (              file_exists($filess2)) { $filss2 = ''.$filess2.'';} else {$filss2 = '';}
              if (              file_exists($filess3)) { $filss3 = ''.$filess3.'';} else {$filss3 = '';}
              if (              file_exists($filess4)) { $filss4 = ''.$filess4.'';} else {$filss4 = '';}
              if (              file_exists($filess5)) { $filss5 = ''.$filess5.'';} else {$filss5 = '';}
              if (              file_exists($filess6)) { $filss6 = ''.$filess6.'';} else {$filss6 = '';}
              if (              file_exists($filess7)) { $filss7 = ''.$filess7.'';} else {$filss7 = '';}
              if (              file_exists($filess8)) { $filss8 = ''.$filess8.'';} else {$filss8 = '';}
              if (              file_exists($filess9)) { $filss9 = ''.$filess9.'';} else {$filss9 = '';} 
              HTML Code:
                <html> <head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <script> $(function() {     $('img').on('mouseover', function() {         var self = this,             i = 0,             images = $(this).data('mouseover').split(/\s+/);          (function nextImage() {             var next = images[i++ % images.length].split('#');             $(self).data('timeout', setTimeout(function() {                 self.src = next[0];                 nextImage();             }, next[1] || 200));         })();      }).on('mouseout', function() {         clearTimeout($(this).data('timeout'));         this.src = $(this).attr('src');     }); }) </script> </head> <body> <img src="<?echo "$filepre ";?>" data-mouseover="<?echo "$filss $filss1 $filss2 $filss3 $filss4 $filss5 $filss6 $filss7 $filss8 $filss9";?>" /> </body> </html>
              My coding way might be not standard,but i like this way. and i want something like this simple & working. hope you understand

              Comment

                #8
                Make sure you add the alt tag to that image code as it will not show the image on older browsers.

                You could save the file names in the database using 1 row so then all you would have to do is:
                PHP Code:
                <?
                $images = mysql_fetch_array(mysql_query("SELECT images FROM tableName WHERE postID='".$blah."'"));
                ?>
                <img src="<?=$filepre?>" data-mouseover="<?=$images[0]?>" alt=""/>
                that way the server is doing less work having to check to see if the files exist or not


                or a way to prevent too many checking if a file exists
                PHP Code:
                <?
                $filepre = $br.'/filethumb/'.$name.'.jpg';
                $url = $br.'/ss/'.$name;
                $images = '';
                for($i=0; $i<10; $i++)
                {
                    if($i!=0) $fileNumber = $i; //one of the file names does not have a number
                    if(file_exists($url.$fileNumber.'.jpg')) $images .= $url.$fileNumber.'.jpg '; else break;
                }
                ?>  
                <img src="<?=$filepre?>" data-mouseover="<?=$images?>" alt=""/>
                Last edited by something else; 15.02.17, 17:59.
                • Likes 1

                Comment

                  #9
                  Originally posted by bdspice View Post
                  users may upload 2 or 3 or 6 or 9 images as screenshot.which going to be use on this line.so i can;t fixed number to "5" or something else as you mentioned.
                  you can define any number you want in that function

                  Advertise your mobile site for FREE with AdTwirl

                  • Likes 1

                  Comment

                    #10
                    Originally posted by something else View Post
                    Make sure you add the alt tag to that image code as it will not show the image on older browsers.
                    Thanks for that. i forgot to add.

                    Originally posted by something else View Post
                    You could save the file names in the database using 1 row so then all you would have to do is:
                    I am making it database-less. so i cant use it.

                    Originally posted by something else View Post
                    or a way to prevent too many checking if a file exists
                    PHP Code:
                    <?
                    $filepre = $br.'/filethumb/'.$name.'.jpg';
                    $url = $br.'/ss/'.$name;
                    $images = '';
                    for($i=0; $i<10; $i++)
                    {
                    if($i!=0) $fileNumber = $i; //one of the file names does not have a number
                    if(file_exists($url.$fileNumber.'.jpg')) $images .= $url.$fileNumber.'.jpg '; else break;
                    }
                    ?>
                    <img src="<?=$filepre?>" data-mouseover="<?=$images?>" alt=""/>
                    i will use this for statement instead of mine. i check your http://jsfiddle.net/e2j1a6vt/1/ its not working properly because of external link. when i download the javascript n try locally, its working very fine. so i am going to host the javascript on mine script and use this code thanks once again

                    Comment

                      #11
                      as i tested your javascript, its working on test page. but it is not working on the main page. i fixed everything possible, can you tell me why not working here http://mojardesh.com/download/?a=video/music ?? variables are workingm you can see outout are ok on filename td. but when mouse hover on it, its not working.

                      Comment

                        #12
                        I think its because you need the jquery file before the mouseover script
                        • Likes 1

                        Comment

                        • bdspice
                          #12.1
                          bdspice commented
                          16.02.17, 23:12
                          Editing a comment
                          Now its all ok, finally its working. but now i have to quite using your codes. because its left a space on last to separate files,thats why a space on last place,its thinking of a image link.which is blank and a blank file will be shown on last.i think that is a bug that can not be fixed :D
                        #13
                        It can be fixed with trim($images)

                        Comment

                          #14
                          Originally posted by something else View Post
                          It can be fixed with trim($images)
                          oh,forgot that nothing is unfix-able in world except heart. i used rtrim() and thats help. thank you buddy.

                          Comment

                          Previous template Next
                          Working...
                          X