0

Facebook が写真に対して行うのと同じように、コードを作成する必要があります。私は彼らが使用する「ポップ」またはライトボックスについて話しているので、右側でコメントできます。この場合、私は電子メールを送信し、下部にランダムな画像を挿入します.

カラーボックスでも考えていましたが、インラインhtmlを使用しています。ユーザーが前の写真から次の写真に移動したい場合、カラーボックスでこれを行う方法がわからないため(画像だけでなくフォームも含む)、

とにかく、連絡フォームはすべての写真で同じです. 各ユーザーには 8 つの写真と 1 つの連絡先フォームがあり、これは既に完了しています。Facebook で使用されているようなライトボックスを作成または構築する必要があります。

そのため、lightbox.js (私の他のオプション) 内で、HTML がここでそれ自体を形成する部分を見つけました。

 Lightbox.prototype.build = function() {
      var $lightbox,
        _this = this;
      $("<div>", {
        id: 'lightboxOverlay'
      }).after($('<div/>', {
        id: 'lightbox'
      }).append($('<div/>', {
        "class": 'lb-outerContainer'
      }).append($('<div/>', {
        "class": 'lb-container'
      }).append($('<img/>', {
        "class": 'lb-image'
      }), $('<div/>', {
        "class": 'lb-nav'
      }).append($('<a/>', {
        "class": 'lb-prev'
      }), $('<a/>', {
        "class": 'lb-next'
      })), $('<div/>', {
        "class": 'lb-loader'
      }).append($('<a/>', {
        "class": 'lb-cancel'
      }).append($('<img/>', {
        src: this.options.fileLoadingImage
      }))))), $('<div/>', {
        "class": 'lb-dataContainer'
      }).append($('<div/>', {
        "class": 'lb-data'
      }).append($('<div/>', {
        "class": 'lb-details'
      }).append($('<span/>', {
        "class": 'lb-caption'
      }), $('<span/>', {
        "class": 'lb-number'
      })), $('<div/>', {
        "class": 'lb-closeContainer'
      }).append($('<a/>', {
        "class": 'lb-close'
      }).append($('<img/>', {
        src: this.options.fileCloseImage
      }))))))).appendTo($('body'));
      $('#lightboxOverlay').hide().on('click', function(e) {
        _this.end();
        return false;
      });
      $lightbox = $('#lightbox');
      $lightbox.hide().on('click', function(e) {
        if ($(e.target).attr('id') === 'lightbox') _this.end();
        return false;
      });
      $lightbox.find('.lb-outerContainer').on('click', function(e) {
        if ($(e.target).attr('id') === 'lightbox') _this.end();
        return false;
      });
      $lightbox.find('.lb-prev').on('click', function(e) {
        _this.changeImage(_this.currentImageIndex - 1);
        return false;
      });
      $lightbox.find('.lb-next').on('click', function(e) {
        _this.changeImage(_this.currentImageIndex + 1);
        return false;
      });
      $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
        _this.end();
        return false;
      });
    };

私の質問は、フォームを HTML に挿入できますか? できると思います。
しかし、ランダム画像などの関数を挿入するために、PHP include を使用できますか?

そのようなことを達成するために何を使用しますか? 参考になる例を知っていますか?私は実際にドキュメントを読み、Colorbox や Lightbox などの主要なものについて多くのことを読みました。また、Jquery と互換性がある必要があります。

編集:WOOOOW !! : jquerytools で見つけたものを見てください。http://jquerytools.org/demos/combine/html5-form/index.html

これが Internet Explorer 6 以降と互換性がある場合、勝者がいます。

4

0 に答える 0