I am creating an google map page with some address markers in wordpress. I have added infobox for addres with some images to be shown in each infobox. Each marker's infobox  can have its own image set i.e marker1 can show image1, image2 in infobox and marker2 can show image3, image4 and image5.

here image[1-5] are just reference of an actual image. Now I wanted to have the cycle plugin effect for each infobox but the cycle plugin is not working for infobox. On outside infobox(and map) the cycle plugin works well but not inside infobox. Probably I am missing some configuration or doing incorrectly, so I need some assistance.

Some code reference I am adding below PHP+html

1. ...
2. if( $record){foreach( $record as $row){
4. if (($isanyimagetoshow==1 )|| (strlen($row->livevideo)>0)){
5. $myHTML=$myHTML."<div class=\"col-md-8\" style=\"padding:0%\">";
6. $myHTML=$myHTML."<div class=\"mycycle$i\" style=\"padding:0%\">";
10. //Loop for all images
11. if (strlen($imagelink1)>0){
13. $myHTML= $myHTML. "<a  href=\"".$imagelink1."\"  rel=\"gallery".$i."\" onclick='jQuery(this).colorbox({rel:\"gallery".$i."\",href:\"".$imagelink1."\"});return false'><img class=\"\" style=\"width:100px;height:100px;vertical-align:middle; float:left;\"  src=\"".$imagelink1."\"></a>";
14. }
16. if (strlen($imagelink2)>0){
17. $myHTML= $myHTML. "<a  href=\"".$imagelink2."\"  rel=\"gallery".$i."\" onclick='jQuery(this).colorbox({rel:\"gallery".$i."\",href:\"".$imagelink2."\"});return false'><img class=\"\" style=\"width:100px;height:100px;vertical-align:middle; float:left;\"  src=\"".$imagelink2."\"></a>";
18. }
19. .....
21. if (strlen($imagelink5)>0){
22. $myHTML= $myHTML. "<a  href=\"".$imagelink5."\"  rel=\"gallery".$i."\" onclick='jQuery(this).colorbox({rel:\"gallery".$i."\",href:\"".$imagelink5."\"});return false'><img class=\"\" style=\"width:100px;height:100px;vertical-align:middle; float:left;\"  src=\"".$imagelink5."\"></a>";
23. }
25.  $myHTML= $myHTML. "</div>";
26. $myHTML= $myHTML. "</div>";
27. ....
28. $arr[$i][0]=$myHTML;
29. ....
30. ...
32. <script type="text/javascript"> 
33.             <?php print "arr = ".json_encode($arr).";\n"; ?>
34.        </script>
35. ....
37. echo  "<script type=\"text/javascript\">";
38. echo  "jQuery(document).ready(function() {";
39.     echo  "jQuery(\".mycycle$i\").cycle({";
40. echo  "fx: 'fade' ";
41. echo  "});";
42. echo  "});";
43. echo  "</script>";
44. .....
45. 
    
46. ...
48. myinfowindow[id]=new InfoBubble({
49.                 map: map,
50.                 position: new google.maps.LatLng(-35, 151),
51.                 shadowStyle: 1,
52.                 padding: 10,
53.                 backgroundColor: 'rgb(255,255,255)',
54.                 borderRadius: 4,
55.                 arrowSize: 10,
56.                 borderWidth: 0,
57.                 borderColor: '#2c2c2c',
58.                 disableAutoPan: false,
59. hideCloseButton: false,
60.                 arrowPosition: 30,
61. disableAnimation:false,
62.                 arrowStyle: 0,
63. maxWidth:400,
64.               });
65. myinfowindow[id].setContent(arr[i][0]);
66. ...
67. ....
69. 
    

The below code is for cycle initiation 

3. echo  "<script type=\"text/javascript\">";
4. echo  "jQuery(document).ready(function() {";
5.     echo  "jQuery(\".mycycle$i\").cycle({";
6. echo  "fx: 'fade' ";
7. echo  "});";
8. echo  "});";
9. echo  "</script>";
10. 
    

I am getting message " [cycle] terminating; zero elements found by selector"

I tried changing the    jQuery('.mycycle$i') to myWind$i. mycycle$i but that did not worked too.