• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 471
  • Last Modified:

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
0
Snoopy_C
Asked:
Snoopy_C
  • 3
  • 2
3 Solutions
 
Shinesh PremrajanTechnical 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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Snoopy_CAuthor Commented:
Can anyon help? Appreciate it!
0
 
Shinesh PremrajanTechnical 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

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now