Magnific Pop up not working for scroll images displayed using Java script (from Dynamic Drive)

Magnific Pop up not working for scroll images displayed using Java script (from Dynamic Drive)

Dear Sir

Please refer 

http://prajaktasoftware.com/sugandhi/aboutus.php

The click on scrolling image donot display the image in pop up
however the same displayed (as non scrolling image) which indicates the Magnific popup is working

displays the image in bigger size when clicked on scrolling image using magnific popup


script for scroll image
  1. <script type="text/javascript">

  3. /***********************************************
  4. * Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  5. * This notice MUST stay intact for legal use
  6. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  7. ***********************************************/


  10. //Specify the slider's width (in pixels)
  11. var sliderwidth="90%"
  12. //Specify the slider's height
  13. var sliderheight="560px"
  14. //Specify the slider's slide speed (larger is faster 1-10)
  15. var slidespeed=1
  16. //configure background color:
  17. slidebgcolor=""

  19. //Specify the slider's images
  20. var leftrightslide=new Array()
  21. var finalslide=''
  22. /*leftrightslide[0]='<a href="#"><img src="images/slide1.jpg" border=0 style="margin-left:15px;margin-right:15px;box-shadow: 0px 5px 12px #151515;" ></a>'
  23. leftrightslide[1]='<a href="#"><img src="images/slide2.jpg" border=0 style="margin-left:15px;margin-right:15px;box-shadow: 0px 5px 12px #151515;"></a>'
  24. leftrightslide[2]='<a href="#"><img src="images/slide3.jpg" border=0 style="margin-left:15px;margin-right:15px;box-shadow: 0px 5px 12px #151515;"></a>'*/

  26. <?php  do { $i++;

  28.  //// main routine where the string is formed //////////////////////////////////////////

  30.  $str='<a href="'.$rows['actualimage'].'" class="with-caption image-link" title="'.$Projectname.'"><img src="'. $rows['bigimage'].'" border=0 style="margin-left:15px;margin-right:15px; "></a>';

  32. /// main routine where string is formed is over ///////////////////////////////////////

  34. ?>
  35.          leftrightslide[<?php echo $i; ?>]='<?php echo $str;?>'
  36.  <?php  
  37. } while ($rows = mysql_fetch_assoc($Result));
  38.  
  39. ?>

  41. //Specify gap between each image (use HTML):
  42. var imagegap=" "

  44. //Specify pixels gap between each slideshow rotation (use integer):
  45. var slideshowgap=15


  48. ////NO NEED TO EDIT BELOW THIS LINE////////////

  50. var copyspeed=slidespeed
  51. leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
  52. var iedom=document.all||document.getElementById
  53. if (iedom)
  54. document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
  55. var actualwidth=''
  56. var cross_slide, ns_slide

  58. function fillup(){
  59. if (iedom){
  60. cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
  61. cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
  62. cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
  63. actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
  64. cross_slide2.style.left=actualwidth+slideshowgap+"px"
  65. }
  66. else if (document.layers){
  67. ns_slide=document.ns_slidemenu.document.ns_slidemenu2
  68. ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
  69. ns_slide.document.write(leftrightslide)
  70. ns_slide.document.close()
  71. actualwidth=ns_slide.document.width
  72. ns_slide2.left=actualwidth+slideshowgap
  73. ns_slide2.document.write(leftrightslide)
  74. ns_slide2.document.close()
  75. }
  76. lefttime=setInterval("slideleft()",30)
  77. }
  78. window.onload=fillup

  80. function slideleft(){
  81. if (iedom){
  82. if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
  83. cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
  84. else
  85. cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

  87. if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
  88. cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
  89. else
  90. cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

  92. }
  93. else if (document.layers){
  94. if (ns_slide.left>(actualwidth*(-1)+8))
  95. ns_slide.left-=copyspeed
  96. else
  97. ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

  99. if (ns_slide2.left>(actualwidth*(-1)+8))
  100. ns_slide2.left-=copyspeed
  101. else
  102. ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
  103. }
  104. }


  107. if (iedom||document.layers){
  108. with (document){
  109. document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
  110. if (iedom){
  111. write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
  112. write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
  113. write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
  114. write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
  115. write('</div></div>')
  116. }
  117. else if (document.layers){
  118. write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
  119. write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
  120. write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
  121. write('</ilayer>')
  122. }
  123. document.write('</td></table>')
  124. }
  125. }
  126. </script>