私はprettyPhotoを私のWordPressテーマに統合しようとしています(私はSydneyテーマを使用しています)。私は、次のことを行っている:prettyPhotoをWordPressテーマに統合する
- はprettyPhoto.cssが
- /CSSディレクトリにファイルをアップロード/ jsのディレクトリ にjqueryの-1.3.2.min.jsとjquery.prettyPhoto.jsファイルをアップロード
- は、
次いで/ imagesディレクトリに画像フォルダの全(フルスクリーン、prettyPhoto、thumbails)をアップロードIは
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
は、:
?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if (! function_exists('has_site_icon') || ! has_site_icon()) : ?>
\t <?php if (get_theme_mod('site_favicon')) : ?>
\t \t <link rel="shortcut icon" href="<?php echo esc_url(get_theme_mod('site_favicon')); ?>" />
\t <?php endif; ?>
<?php endif; ?>
<?php wp_head(); ?>
<!--
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue3 = $("#input").val();
});
});
</script>
-->
</head>
そして、prettyPhotoを初期化するために、私は
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
、右終了タグの前に、次のように:今
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the #content div and all content after
*
* @package Sydney
*/
?>
\t \t \t </div>
\t \t </div>
\t </div><!-- #content -->
\t <?php if (is_active_sidebar('footer-1')) : ?>
\t \t <?php get_sidebar('footer'); ?>
\t <?php endif; ?>
<a class="go-top"><i class="fa fa-angle-up"></i></a>
\t <footer id="colophon" class="site-footer" role="contentinfo">
\t \t <div class="site-info container">
\t \t \t <a href="<?php echo esc_url(__('http://wordpress.org/', 'sydney')); ?>"><?php printf(__('Proudly powered by %s', 'sydney'), 'WordPress'); ?></a>
\t \t \t <span class="sep"> | </span>
\t \t \t <?php printf(__('Theme: %2$s by %1$s.', 'sydney'), 'aThemes', '<a href="http://athemes.com/theme/sydney" rel="designer">Sydney</a>'); ?>
\t \t </div><!-- .site-info -->
\t </footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
、私のワードプレスのページに、によって記述されている部分があります"fp-call-to-action.php"というファイル
このファイルにはボタンが含まれています。ボタンをクリックすると、私はprettyPhoto使用して、ユーチューブの動画をライトボックスで開きたい:
<div>
<a href="http://www.youtube.com/watch?v=40wYKjSd9r0" rel="prettyPhoto" title="youtube">
<button type="button" id="button">Jetzt anschauen!</button>
</a>
</div>
しかし、私はボタンをクリックするたびに、私はユーチューブにリダイレクトされます。ビデオはライトボックスで開かれません。
どこが間違っていますか?
ご協力いただきありがとうございます。