image display

Hi expert. I want to display the image as the below:
User can scroll the image from the left to right or vise versa, when mouse is over the image on the bottom, the enlarge one will be displayed on the top. How to accomplish it? Appreciate it!
A picture is attached.
scroll.jpg
Snoopy_CAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shinesh PremrajanEngineering ManagerCommented:
The attached code is working sample.. solve 80% of your issue.

But the code to enlarge image need to be embedded..

Hope this helps
example.zip
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
anas5_2007Commented:
0
Snoopy_CAuthor Commented:
Thank you! I followed the instructions and downloaded the js files, when I ran the code, it is an empty page. Below is the code;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" />  
 
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="photoslider.js"></script>  
</head>

<body>
<div class="photoslider" id="default"></div>  
 
<script type="text/javascript">  
$(document).ready(function(){  
    //change the 'baseURL' to reflect the host and or path to your images  
    FOTO.Slider.baseURL = 'http://example.com/path/';  
 
    //set images by filling our bucket directly  
    FOTO.Slider.bucket = {  
      'default': {  
            {'thumb': '1.jpg', 'main': '0.jpg', 'caption': 'Opie'},  
            {'thumb': '2_1.jpg', 'main': '1-2.jpg'},  
            {'thumb': '3_1.jpg', 'main': '2-2.jpg', 'caption': 'Trash the Dress'},  
            {'thumb': '4_1.jpg', 'main': '3-2.jpg'}  
        }  
    };  
 
    //or set our images by the bucket importer  
    var ids = new Array(0,1,2,3);  
    FOTO.Slider.importBucketFromIds('default',ids);  
});  
</script>  
</body>
</html>
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Snoopy_CAuthor Commented:
Can anyon help? Appreciate it!
0
Shinesh PremrajanEngineering ManagerCommented:
i think the code need to be changed

FOTO.Slider.baseURL = 'http://yourdomain.com/';  << you need to specify your correct domain name
 
    //set images by filling our bucket directly  
    FOTO.Slider.bucket = {  
      'default': {  
             //give the correct image name here and that should be there in the same folder as this file
//the image name must be 1.jpg then 2.jpg like wise.

            {'thumb': '1.jpg', 'main': '0.jpg', 'caption': 'Opie'},  
            {'thumb': '2_1.jpg', 'main': '1-2.jpg'},  
            {'thumb': '3_1.jpg', 'main': '2-2.jpg', 'caption': 'Trash the Dress'},  
            {'thumb': '4_1.jpg', 'main': '3-2.jpg'}  
        }  
    };  

Hope this helps

0
Snoopy_CAuthor Commented:
NO, still an empty page.
I changed FOTO.Slider.baseURL =
'http://mydomain.com/folder/" even the path where the images are instored. I uploaded the file to the server, but does not work.

Besides, I looked the demo and the bottom images are not in a straight line, and I don't wan that effect.

Is there any other better way to do this? Appreciate it!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.