How to display multiple images on mouse hover on php

[bdspice]

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.

[something else]

It can be fixed with trim($images)

[bdspice]

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

[something else]

I think its because you need the jquery file before the mouseover script

[bdspice]

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.

[bdspice]

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.

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.

or a way to prevent too many checking if a file exists

<?
$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

[GumSlone]

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

[something else]

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:

<?
$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

<?
$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=""/>

[bdspice]

why dont you use/"steal" the javascript from that site?

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:

$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> <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

[something else]

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:

<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>

[GumSlone]

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?

http://www.urokitv.ru/js/KernelTeamImageRotator.js?v=3.8.1

usage:

<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:

  KT_rotationStart(image, urlPrefix, thumbCount, thumbExt)

[something else]

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

[bdspice]

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.

[something else]

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:

<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>

[bdspice]

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.