Expand image from slide show

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • idsanjeev
    New Member
    • Oct 2007
    • 241

    Expand image from slide show

    Hi
    i have some image in slide show on load events. i wants to expand image on mouseover from slide show.
    thanks
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5390

    #2
    on mouseover just set the size and with of the currently hovered image ... post the code you have done so far.

    kind regards

    Comment

    • idsanjeev
      New Member
      • Oct 2007
      • 241

      #3
      Originally posted by gits
      on mouseover just set the size and with of the currently hovered image ... post the code you have done so far.

      kind regards
      Hello gits
      code of fade image is work but i wants to on mouse over the image is expanded

      [code=javascript s]

      <script language="javas cript" type="text/javascript">
      <!-- Begin
      // Set slideShowSpeed (milliseconds)
      var slideShowSpeed = 1500;
      // Duration of crossfade (seconds)
      var crossFadeDurati on = 3;

      var Pic = new Array();
      // to add more images, just continue
      // the pattern, adding to the array below

      Pic[0] = 'images/photo1.jpg'
      Pic[1] = 'images/photo2.jpg'
      Pic[2] = 'images/photo3.jpg'
      Pic[3] = 'images/photo4.jpg'
      Pic[4] = 'images/photo5.jpg'
      Pic[5] = 'images/photo6.jpg'
      Pic[6] = 'images/photo7.jpg'
      Pic[7] = 'images/photo9.jpg'
      Pic[8] = 'images/photo10.jpg'
      Pic[9] = 'images/photo11.jpg'

      // do not edit anything below this line
      var t;
      var j = 0;
      var p = Pic.length;
      var preLoad = new Array();
      for (i = 0; i < p; i++) {
      preLoad[i] = new Image();
      preLoad[i].src = Pic[i];
      }
      function runSlideShow() {
      if (document.all) {
      document.images .SlideShow.styl e.filter="blend Trans(duration= 2)";
      document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati on)";
      document.images .SlideShow.filt ers.blendTrans. Apply();
      }
      document.images .SlideShow.src = preLoad[j].src;
      if (document.all) {
      document.images .SlideShow.filt ers.blendTrans. Play();
      }
      j = j + 1;
      if (j > (p - 1)) j = 0;
      t = setTimeout('run SlideShow()', slideShowSpeed) ;
      }
      window.onload=r unSlideShow;
      // End -->


      </script>
      [/code]
      [code=html ]

      <div style="position :absolute; top:0; left:0 ">
      <img src="images/photo9.jpg" name='SlideShow ' border="5px" style="border-color:#B812A7 " width="170PX" height="140PX" title="Barauni Refinry">

      </div>
      [/code]

      thanks

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5390

        #4
        let me give you an example:

        [HTML]<html>
        <script type="text/javascript">
        function zoom_in(ele) {
        ele.style.width = '400px';
        ele.style.heigh t = '400px';
        }
        </script>

        <body>
        <img src="image.gif" onmouseover="zo om_in(this);">
        </body>
        </html>
        [/HTML]
        kind regards

        Comment

        • idsanjeev
          New Member
          • Oct 2007
          • 241

          #5
          Hello gits
          Thanks it works fine
          i am usinng some frame so i wants to open it in popupwindow on mouseover and onmouse out close popup becouse size of frame where image fadein is very short its maximum width is 170px .

          thanks

          Comment

          • gits
            Recognized Expert Moderator Expert
            • May 2007
            • 5390

            #6
            do you have a solution, or are you asking for one? in that case use window.open() in the shown function and append an image element with a src to the greater image to it ... on mouseover just use window_ref.clos e() ...

            the better solution would be to use an inline div or google for lightbox in case you wnat to have some out of the box fancy stuff ...

            kind regards

            Comment

            • idsanjeev
              New Member
              • Oct 2007
              • 241

              #7
              i have solution of window.open() on mouseover and but i cant understands how can image show thats fade in

              [CODE=javascript s]

              new_window.docu ment.open();

              // Text of the new document
              // Replace your " with ' or \" or your document.write statements will fail
              new_window.docu ment.write("<ht ml><title>JavaS cript New Window</title>");
              new_window.docu ment.write("<bo dy bgcolor=\"#FFFF FF\">");
              new_window.docu ment.write("Thi s is a new html document created by JavaScript ");
              new_window.docu ment.write("sta tements contained in the previous document.");
              new_window.docu ment.write("</body></html>");

              // close the document
              new_window.docu ment.close();
              }
              [/CODE]

              Comment

              • idsanjeev
                New Member
                • Oct 2007
                • 241

                #8
                hello
                I think i couldn't expalin clearly whats my need.
                lets try to explain
                i have four frame top,left,cetner and right
                some images are display at right frame in fader
                my needs onmouseover open a popup window and expand the image
                i have code for popupwindow but havn't idea how to display image thats in fader
                thanks

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5390

                  #9
                  i'm not really sure that i get it ... are you looking for something like this:

                  in your image's onmouseover use:

                  Code:
                  onmouseover="zoom_window(this);"
                  i assume your function now uses the code you posted above and now gets the ref to the currently clicked image passed to it. so you could use something like the following now:

                  [CODE=javascript]function zoom_window(ref ) {
                  // some of your code
                  new_window.docu ment.write('<im g src="' + ref.src + '"/>');
                  // more of your code
                  }[/CODE]
                  kind regards

                  Comment

                  • hsriat
                    Recognized Expert Top Contributor
                    • Jan 2008
                    • 1653

                    #10
                    If I can jump into this, may I know if the OP wants something what happens in yahoo mail (the new one) when you click on an attachment image?

                    Comment

                    • idsanjeev
                      New Member
                      • Oct 2007
                      • 241

                      #11
                      Hi gits
                      here is my code which works thats i wnats to do

                      Code:
                      <script language="javascript">
                      //Function to open PopupWindow and Close PopupWindow
                      function new_window(){
                      	new_window = open('fader.asp','new','width=500,height=450,left=10,top=10');
                      }
                      
                      function close_window() 
                      {
                      new_window.close();
                      }
                      
                      </script>
                      
                      <div style="position:absolute; top:0; left:0 ">
                      
                      <!--
                      Link for opne popup wondow 
                      <a onmouseover="window.open('fader.asp','Popup_Window','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=475px,height=420px,top=30,left=20')"  >
                      -->
                      
                      <img src="images/1.jpg" id="new" onMouseOver="new_window()" onMouseOut="close_window()" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX"  title="Click to Magnifying Image">
                      <!--</a>-->
                      </div>
                      But when first time mouse over on image popup window is opend and onmouseout closed but not more without page refresh means it works only one time when mouse over on image after first time error is at line 21 where <img src............ .>
                      line:-21
                      char:-1
                      error:-the callee[server[not server application]]is not available and disappeared; all connection are invalid. the call did not execute.

                      I am creating link onmouseover image window is open but it not close on mouseout
                      I try with these two to open new window onmouseover and close on mouseout
                      thanks

                      Comment

                      • idsanjeev
                        New Member
                        • Oct 2007
                        • 241

                        #12
                        Hi this code is working for me

                        Code:
                        <script language="javascript"> 
                        //Function to open PopupWindow and Close PopupWindow 
                        
                        function   new_window() { 
                          my_window = window.open('fader.asp','new','width=500,height=450,left=10,top=10'); 
                          } 
                          
                        function close_window() { 
                          my_window.close(); 
                          } 
                          
                        </script>
                        Happy codding
                        Thanks

                        Comment

                        • idsanjeev
                          New Member
                          • Oct 2007
                          • 241

                          #13
                          Hi
                          I wants use open image in new winow mouseover on which but can't success

                          Code:
                          <scripts laguage="javascrpts">
                          function new_window(ImageURL) { 
                          my_window = window.open(ImageURL, 'new', 'width=500,height=450,left=10,top=10'); 
                            } 
                          function close_window() { 
                            my_window.close(); 
                            } 
                          </script> 
                          <div id="new" style="position:absolute; top:0; left:0 "> 
                          <img src="images/1.jpg"  onMouseOver="new_window('images1/1.jpg')"  onMouseOut="close_window()" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX"  title="Magnifying Image"> 
                          
                          </div>

                          Comment

                          • gits
                            Recognized Expert Moderator Expert
                            • May 2007
                            • 5390

                            #14
                            you have some errors in your code, fix the type in javascript-tag, the script-tag itself etc. write the event-handlers all lowerCase -> for example onmouseover ...

                            [HTML]<script type="text/javascript">
                            function new_window(Imag eURL) {
                            my_window = window.open(Ima geURL, 'new', 'width=500,heig ht=450,left=100 ,top=100');
                            }
                            </script>
                            <div id="new" style="position :absolute; top:0; left:0 "> <img src="images/1.jpg" onmouseover="ne w_window('image s1/1.jpg')" name='SlideShow ' border="5px" style="border-color:#B812A7 " width="170px" height="170px" title="Magnifyi ng Image">
                            </div>
                            [/HTML]
                            kind regards

                            Comment

                            • hsriat
                              Recognized Expert Top Contributor
                              • Jan 2008
                              • 1653

                              #15
                              Originally posted by idsanjeev via PM
                              Hi
                              I wants use open image in new winow mouseover on which but can't success

                              Code:
                              &lt;scripts laguage="javascrpts"&gt;
                              function new_window(ImageURL) { 
                              my_window = window.open(ImageURL, 'new', 'width=500,height=450,left=10,top=10'); 
                                } 
                              function close_window() { 
                                my_window.close(); 
                                } 
                              &lt;/script&gt; 
                              &lt;div id="new" style="position:absolute; top:0; left:0 "&gt; 
                              &lt;img src="images/1.jpg"  onMouseOver="new_window('images1/1.jpg')"  onMouseOut="close_window()" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX"  title="Magnifying Image"&gt; 
                              
                              &lt;/div&gt;
                              it open only one image images/1.jpg but my needs to open thats image mouse overon which from slide
                              thanks
                              Declare my_window as a global variable in the start of the JavaScript.
                              When your new_window function is done, the local variable my_window is getting deleted. So the closing function doesn't work.
                              Remove language attribute from script tag, use type attribute instead (type="text/javascript").
                              Use onmouseover instead of onMouseOver. Its not VB script.
                              And follow as gits suggested.

                              And I asked you here about the problem but you didn't reply, so there was no need of PM.

                              Regards,
                              Harpreet

                              Comment

                              Working...