Help with implementing image scroller into infoWindow!

YuwonNg — Wed, 13 Apr 2011 08:09:57 GMT

Hi, can someone please help me out with this? I've tried it a few time but couldn't get the image scroller into the infoWindow! :confused:

I want to sort of MERGE this code

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>

<style type="text/css">
 #container { text-align: center; }
 #imageBox{ margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
 #imageBoxInside { width: 10000px; }  #imageBox img { float: left; padding: 0px; margin: 0px; }
 #imageBox br { clear: both; }
 #controls img { border: 0; }
</style>

<script>
 function moveToPrevious(){
  new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
 }  

 function moveToNext(){
  new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
 }
</script>
</head>

<body>
<div id="container">
    <div id="imageBox">
  <div id="imageBoxInside">
   <img src="C:/Users/L33508/Desktop/Images/sauce.jpg" />
   <img src="C:/Users/L33508/Desktop/Images/fish.jpg" />
   <img src="C:/Users/L33508/Desktop/Images/pizza.jpg" />
   <img src="C:/Users/L33508/Desktop/Images/noodles.jpg" />
   <img src="C:/Users/L33508/Desktop/Images/cover.jpg" />
   <img src="C:/Users/L33508/Desktop/Images/hotdog.jpg" />
   <br/>
  </div>
    </div>
 
 <div id="controls">
  <a href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="C:/Users/L33508/Pictures/left_arrow.jpg"/></a>
  <a href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="C:/Users/L33508/Pictures/right_arrow.jpg"/></a>
    </div>
<div>
</body>
</html>

into this one shown here:

<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="PeranakanMain.aspx.vb" Inherits="Peranakan_SG.PeranakanMain" 
    title="" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <script type="text/javascript">
    function addSymbol(){
     var  map=OneMap.map; 
  if(map.getLayer("symbolLayer")==null){
  map.addLayer(gLayer);
   //dojo.connect(omap.map.infoWindow, "onShow", setInfoContent);
  map.infoWindow.resize(525,252);
 
    map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
  
 }
 gLayer.clear();
 alert("Do you know where Peranakan food can be found??                            Take a look here!!!!");
    var stX             =   "23319.3347409758";
    var stY             =   "28825.7191286444";
    var pt= new esri.geometry.Point(stX,stY,map.spatialReference);
    //var strImage = "http://www.rw-designer.com/i/download48b.png";
    var strImage = "images/museum.png";
    var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
    var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"};
    var infoTemplate = new esri.InfoTemplate();
    infoTemplate.setTitle("Building Name:");
    infoTemplate.setContent(getInfoContent);
    var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate);
    gLayer.add(graphic);  
    }

   function setInfoContent(){
   infoWindow.setContent(getInfoContent());
   }
 
   function getInfoContent(graphic){
   var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"});
   var c1 = new dijit.layout.ContentPane({
   region: "top",
   style: "height: 20px width: 100%",
   content: "hello Peranakan!! Here is a brief description"
   });
   bc.addChild(c1);
   

   //make a tab container 
   var tc = new dijit.layout.TabContainer({
   region: "center",
   style: "height: 65%; width: 100%;  "
   }, dojo.create("div"));

    //display attribute information
    var cp1 = new dijit.layout.ContentPane({
 //style: " background-color: red; ",
          title: "<font color= #E4287C><b>1900 - 1930</font> ",
          content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table>"
        });
    tc.addChild(cp1);
  
    var cp2 = new dijit.layout.ContentPane({
    title: "<font color= #E4287C><b>1931 - 1960</b></font>",
    content: "<table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' target='foo'>1970</a><br/><a href='childpage2.htm' target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table>"
    });
    tc.addChild(cp2);
    
    var cp3 = new dijit.layout.ContentPane({
 //style: " background-color: red; ",
          title: "<font color= #E4287C><b>1961 - 1990</b></font> ",
          content: "<table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
        });
    tc.addChild(cp3);
    
    var cp4 = new dijit.layout.ContentPane({
 //style: " background-color: red; ",
          title: "<font color= #E4287C><b>1990 - 2011</b></font> ",
          content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table><br/><table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' target='foo'>1970</a><br/><a href='childpage2.htm' target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table><br/><table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
        });
    tc.addChild(cp4);
 bc.addChild(tc);
 return bc.domNode;
 }
 dojo.addOnLoad(addSymbol);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavigationContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div dojotype="dijit.layout.BorderContainer"  design="headline" gutters="false" 
    style="width: 955px; height: 490px; margin: 0 0 0 0px;">

<div id="map" dojotype="dijit.layout.ContentPane" region="center" position=""
        style="height: 498px; width: 1004px; margin-left: 63px;" ></div>
        </div>
        
</div>

</asp:Content>

I'm still new & learning, any kind souls willing to help me out?

P.S. When I insert the 2 script sources from the first sample into the second, my icon on the map disappears! Any idea why too?

topic Help with implementing image scroller into infoWindow! in ArcGIS JavaScript Maps SDK Questions

Help with implementing image scroller into infoWindow!