Community
Select to view content in your preferred language

Help with implementing image scroller into infoWindow!

421
0
04-13-2011 01:09 AM
YuwonNg
by
Emerging Contributor
‎04-13-2011 01:09 AM
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?
0 Kudos
0 Replies