Fancybox Video Pop-up in Wordpress?

Ich habe eine Seite hier: mit fancybox http://desertcinema.com/home-test/Fancybox Video Pop-up in Wordpress?

Und ich mag einen fancybox für Video (Youtube und Vimeo) und Fotogalerie für Fotos unter meinem Portfolio Abschnitt hinzuzufügen.

Da ich auf Wordpress-Website (benutzerdefinierte Seite) arbeite. Ich greife header.php Datei und hinzugefügt, um die CDN-Links für sowohl die jQuery und CSS von fancybox:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />

Hier ist die Datei header.php:

<!DOCTYPE html> 
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]> 
<!--><html <?php language_attributes(); ?>><!--<![endif]--> 
<?php 
global $theme_option; 
global $wp_query; 
    $seo_title = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_title", true); 
    $seo_description = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_description", true); 
    $seo_keywords = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_keywords", true); 
?> 
<head> 
    <!-- Basic Page Needs 
    ================================================== --> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <title><?php bloginfo('name'); ?> <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title> 
    <meta name="author" content="<?php if(isset($theme_option['text_facebook']) && $theme_option['text_facebook'] != ''){echo $theme_option['text_facebook'];}else{echo 'Vergatheme';} ?>"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <!-- Mobile Specific Metas 
    ================================================== --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <?php if($seo_description!="") { ?> 

    <?php }elseif($theme_option['seo_des']){ ?> 
    <meta name="description" content="<?php echo $theme_option['seo_des']; ?>"> 
    <?php } ?> 
    <?php if($seo_keywords!="") { ?> 
    <meta name="keywords" content="<?php echo $seo_keywords; ?>"> 
    <?php }elseif($theme_option['seo_key']){ ?> 
    <meta name="keywords" content="<?php echo $theme_option['seo_key']; ?>"> 
    <?php } ?> 
    <!-- CSS 
    ================================================== --> 
    <!-- Favicons 
    ================================================== --> 
    <link rel="shortcut icon" href="<?php echo $theme_option['favicon']['url']; ?>" type="image/png"> 
    <link rel="apple-touch-icon" href="<?php echo $theme_option['apple_icon']['url']; ?>"> 
    <link rel="apple-touch-icon" sizes="72x72" href="<?php echo $theme_option['apple_icon_72']['url']; ?>"> 
    <link rel="apple-touch-icon" sizes="114x114" href="<?php echo $theme_option['apple_icon_114']['url']; ?>"> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" /> 


<?php wp_head(); ?>

Jetzt auf meinem HTML Ich habe versucht, diese hinzufügen Codes hier pro instruction:

<a href="https://vimeo.com/169312968" class="more"></a>

zum Wrap Bild, um sicherzustellen, es erscheint:

Jetzt

endlich damit es funktioniert ich ein Skript erstellt, das ich an der Fußzeile meiner benutzerdefinierten Seite platzieren:

<script> 
$("a.more").click(function() { 
    $.fancybox({ 
      'padding'  : 0, 
      'autoScale'  : false, 
      'transitionIn' : 'none', 
      'transitionOut' : 'none', 
      'title'   : this.title, 
      'width'  : 680, 
      'height'  : 495, 
      'href'   : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
      'type'   : 'swf', 
      'swf'   : { 
       'wmode'  : 'transparent', 
       'allowfullscreen' : 'true' 
      } 
     }); 

    return false; 
}); 
</script>

Allerdings, wenn ich es versuchte, es verbindet mich einfach auf den Link i innerhalb des Link platzieren i dargestellt:

Jede Idee, was ich falsch mache? Ich muss wirklich eine responsive Popup/Lightbox für jedes Bild sowohl Video-und Bildergalerie zeigen.

Vielen Dank im Voraus für die Hilfe.

Quelle

2016-06-15 Kimberly Wright

Das jquery-Plugin ist nicht da. Überprüfen Sie die Konsole auf Fehler. Legen Sie sie über dem fancybox

Quelle

2016-06-15 04:48:48 SESN

Es besteht. Es funktioniert nicht. –

Antwort

Verwandte Themen