javascript - 使用 JavaScript 从 URL 调用 colorbox

Question

我的目标是根据我在地址栏中指定的 URL 在 colorbox 中打开媒体 Assets 。

主题已在网络上进行了足够多的讨论，但我似乎无法使用末尾附加“?open=true”的 url 来在加载 url 时打开特定视频。

HTML代码

<ul>          <li class="media-row">

          <a rel="" class="colorbox-inline initColorboxInline-processed cboxElement" href="/?width=600px&amp;height=400px&amp;title=&amp;inline=true#colorbox-inline-1"><img width="205" height="115" class="imagecache imagecache-lightbox_small" title="" alt="" src="http://localhost:8888/sites/default/files/imagecache/lightbox_small/emvideo-vimeo-33340864.jpg"></a><div style="display: none;"><div id="colorbox-inline-1"><div class="emvideo emvideo-video emvideo-vimeo"><div class="media-vimeo" id="media-vimeo-1">
    <iframe width="600" height="375" src="http://player.vimeo.com/video/33340864?fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;autoplay=0"></iframe>
</div>
</div>
</div></div>    
          <h3>Sample Video</h3>    
          <p>Lorem ipsum dolor sit ame
</p>            
      </li>
          <li class="media-row">

          <a rel="" class="colorbox-inline initColorboxInline-processed cboxElement" href="/?width=600px&amp;height=400px&amp;title=&amp;inline=true#colorbox-inline-2"><img width="205" height="115" class="imagecache imagecache-lightbox_small" title="" alt="" src="http://localhost:8888/sites/default/files/imagecache/lightbox_small/emvideo-vimeo-9445708.jpg"></a><div style="display: none;"><div id="colorbox-inline-2"><div class="emvideo emvideo-video emvideo-vimeo"><div class="media-vimeo" id="media-vimeo-2">
    <iframe width="600" height="375" src="http://player.vimeo.com/video/9445708?fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;autoplay=0"></iframe>
</div>
</div>
</div></div>    
          <h3>Custom Video</h3>    
          <p>Lorem ipsum dolor sit amet, conse
</p>            
      </li>
          <li class="media-row">

          <a rel="" class="colorbox-inline initColorboxInline-processed cboxElement" href="/?width=600px&amp;height=400px&amp;title=&amp;inline=true#colorbox-inline-3"><img width="205" height="115" class="imagecache imagecache-lightbox_small" title="" alt="" src="http://localhost:8888/sites/default/files/imagecache/lightbox_small/emvideo-vimeo-33989254"></a><div style="display: none;"><div id="colorbox-inline-3"><div class="emvideo emvideo-video emvideo-vimeo"><div class="media-vimeo" id="media-vimeo-3">
    <iframe width="600" height="375" src="http://player.vimeo.com/video/33989254?title=0&amp;fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;autoplay=0"></iframe>
</div>
</div>
</div></div>    
          <h3>Keor limpon</h3>    
          <p>Med borla dorla shoe
</p>            
      </li>


      </li>
      </ul>

JS

var
vars = [],
hash,
hashes = window.location.href.slice(window.location.href.indexOf('?')
    + 1).split('&');
        for(var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
       $(".colorbox-inline").colorbox({open:vars['open'] == 'true' ? true : false});

Answer 1

您的方法是一个好的开始，但它不起作用的原因是您还需要为 colorbox 设置一种方法来分别定位每个 colorbox。目前，colorbox 正在使用 colorbox-inline 类获取所有元素的 jquery 集合，如果 open=true，它将始终只打开集合中的第一个。由于您没有对它们进行分组(通过为它们分配相同的非空 rel 属性)，集合中的其余元素将被忽略。

为了让 colorbox 定位页面上的特定 colorbox，请为您的 html 中的所有 colorbox 提供 id:

<a id="cb1" class="colorbox-inline" href="...">...</a>

然后在您的 javascript 中，实例化所有颜色框，但仅当其中一个 id 在 url 中发送时才打开颜色框(如下所示:http://site.com/page.html?open=cb1):

//get the colorbox id in url (or set to false if not found)
var colorboxId = 
        (window.location.href.indexOf('open=')==-1) ?
            false :
            window.location.href.slice(window.location.href.indexOf('open=') + 'open='.length + 1).split('&')[0];

//OR: if you prefer using regular expressions, you can tidy
//that up with something like this:
var colorboxId = url.match(/open=([\w\d]*)/) && RegExp.$1 || false;

//instantiate all colorboxes on the page (but do not open any)
$(".colorbox-inline").colorbox();

//if the id of the colorbox was sent in the url, open it now
if(colorboxId!==false) {
    $('#' + colorboxId).colorbox({open:true});
}