asked on

scroll images

Scroll image vertically, and when user selects image in the scroll, the bigger image will display. I have the code below, and the scroll is working, but the image won't display. I also want the image display on the left side of the scroll images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="jquery.jcarousel.pack.js"></script>
<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});


function showIt(link) { 
  document.getElementById('img').innerHTML='<img src="'+link.href+'" />' 
  document.getElementById('imgTitle').innerHTML=link.title 
  return false; 
} 
 

</script>
</head>
<body>
<div id="wrap">
 

  <ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li><img src="images/1.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/2.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/3.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/4.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/5.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/6.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/7.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/8.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/9.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/10.jpg" width="75" height="75" alt="" /></li>
  </ul>

<div> 
<div id="img" style="height:300px; width: 300px; border: 1px solid gray;"><img src="images/big/1.jpg" /></div>
<span id="imgTitle"></span> 
<div id="wrap">
   
  <ul id="mycarousel" class="jcarousel-skin-ie7"> 
    
  </ul> 
 
</div>
 

</div>
</body>
</html>

Open in new window

jquery.jcarousel.css
jquery.jcarousel.js
jquery.jcarousel.pack.js
skin.css
style.css

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rabbit W

ASKER

Below is the full coding which shows the horizontal bar and image. I want the vertical bar on the right and show the the image on the left of the scroll image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<head> 
<title>jCarousel Examples</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<!-- 
  jQuery library 
--> 
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script> 
<!-- 
  jCarousel library 
--> 
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script> 
<!-- 
  jCarousel core stylesheet 
--> 
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" /> 
 
<!-- 
  jCarousel skin stylesheet 
--> 
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" /> 
 
<script type="text/javascript"> 
 
var mycarousel_itemList = [ 
    {url: "images/1.jpg", title: ""}, 
    {url: "images/2.jpg", title: ""}, 
    {url: "images/3.jpg", title: ""}, 
    {url: "images/5.jpg", title: ""}, 
    {url: "images/6.jpg", title: ""}, 
    {url: "images/9.jpg", title: ""}, 
    {url: "images/17.jpg", title: ""}, 
    {url: "images/18.jpg", title: ""}, 
    {url: "images/19.jpg", title: ""}, 
    {url: "images/20.jpg", title: ""} 
]; 
 
function mycarousel_itemLoadCallback(carousel, state) 
{ 
    for (var i = carousel.first; i <= carousel.last; i++) { 
        if (carousel.has(i)) { 
            continue; 
        } 
 
        if (i > mycarousel_itemList.length) { 
            break; 
        } 
 
        // Create an object from HTML 
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0); 
     
        carousel.add(i, item); 
    } 
}; 
 
/** 
 * Item html creation helper. 
 */ 
function mycarousel_getItemHTML(item) 
{ 
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg'); 
   return '<a href="' + url_m + '" title="' + item.title + '"'+
' onMouseOver="showIt(this)"' +
' onClick="return showIt(this)"><img src="' + item.url + '"  width="75" height="75" border="0" alt="' + item.title + '"  /></a>';}; 
 
jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
        size: mycarousel_itemList.length, 
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} 
    }); 
}); 
function showIt(link) { 
  document.getElementById('img').innerHTML='<img src="'+link.href+'" />' 
  document.getElementById('imgTitle').innerHTML=link.title 
  return false; 
} 
 
</script> 
 
</head> 
<body> 
<div> 
<div id="img" style="height:300px; width: 300px; border: 1px solid gray;"><img src="images/big/1.jpg" /></div>
<span id="imgTitle"></span> 
<div id="wrap">
   
  <ul id="mycarousel" class="jcarousel-skin-ie7"> 
    <!-- The content will be dynamically loaded in here --> 
  </ul> 
 
</div>
</div> 
test
</body> 
</html>

Open in new window