Loading ...
Sorry, an error occurred while loading the content.

Question About The Photo Box

Expand Messages
  • James
    The script at the bottom is supposed to dynamically load photos into a photobox. I realize that the photobox isn t a standard YUI widget, but I d still really
    Message 1 of 1 , Oct 26, 2006
    • 0 Attachment
      The script at the bottom is supposed to dynamically load photos into a
      photobox. I realize that the photobox isn't a standard YUI widget, but
      I'd still really like to use it.

      The script seems to work, only it doesn't actually show the image once
      the photobox is opened via an onclick. Can someone tell me why the
      photo array I'm loading into the 'photo' property of the photobox isn't
      actually doing what it should? I'd be very greatful!

      JS:

      <script type="text/javascript">
      YAHOO.namespace("altBike.photobox");

      function init() {
      var photoboxes =
      YAHOO.util.Dom.getElementsByClassName('abpb', 'a');
      if(photoboxes.length > 0) {

      YAHOO.altBike.photobox = new
      YAHOO.widget.PhotoBox("win", {

      effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},{effect\
      :YAHOO.widget.PanelEffect.BODY_EXPAND_V,duration:0.35}],
      fixedcenter: true, constraintoviewport:
      true, underlay:"none", close:true, visible:false, draggable:false,
      modal:true,
      width:"500px"}
      );

      var photoArr = new Array();
      for(var i = 0; i < photoboxes.length; i++) {
      var obj = new photoObj(
      photoboxes[i].href, photoboxes[i].title );
      photoArr.push(obj);


      YAHOO.util.Event.addListener(photoboxes[i], 'click',
      YAHOO.altBike.photobox.show, YAHOO.altBike.photobox, true);
      }
      YAHOO.altBike.photobox.cfg.addProperty('photos',
      photoArr);
      YAHOO.altBike.photobox.render();
      }
      }

      function photoObj(src, caption) {
      this.src = src;
      this.caption = caption;
      }

      YAHOO.util.Event.addListener(window, "load", init);

      </script>

      HTML:
      <a href="http://altbike.com/wp-content/uploads/2006/09/CIMG0918_500.JPG"
      class="abpb" title="test-title1" onclick="return false;">
      <img
      src="http://altbike.com/wp-content/uploads/2006/09/CIMG0918_250.JPG"
      alt="test1" id="img1" />
      </a>

      <!-- PhotoBox HTML, must keep //-->
      <div id="win">
      <div class="hd"><div class="lt"></div><span
      id="win_title">Linus</span><div class="rt"></div></div>
      <div class="bd">
      <img id="win_img" src="#" width="500"/>
      </div>
      </div>
      </div>
      <!-- end PhotoBox HTML //-->
    Your message has been successfully submitted and would be delivered to recipients shortly.