使用javascript從URL調用colorbox

Question

我的目標是根據我在地址欄中指定的URL在colorbox中打開媒體資源。

主題已經在網絡上討論過了，但我似乎無法使用加上'？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-inline類獲取所有元素的jquery集合，如果open = true，它將始終只打開集合中的第一個元素。並且由於您沒有對它們進行分組（通過爲它們分配相同的非空rel屬性），集合中的其餘元素將被忽略。

爲了讓顏色框到目標頁面上特定的顏色框，給的id在你的HTML所有colorboxes：

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

然後，在JavaScript中，實例所有colorboxes，但只有一個打開顏色框這些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}); 
}