Slider image problem in AMP mode

  • Hi there

    The codes which are using in this moment:

    <script src="<?php bloginfo('stylesheet_directory') ;?>/js/jquery.easing.1.3.js"></script>
<script src="<?php bloginfo('stylesheet_directory') ;?>/js/jquery.bxslider.js"></script>
<script>
$(document).ready(function() {
    var obj = $('.slider').bxSlider({
      auto: true,
      infiniteLoop: true,
      responsive: false,
      speed: 1000,
      displaySlideQty: 1,
      pager: false,
      slideWidth: 1181,
controls: false,
      minSlides: 1,
      maxSlides: 1,
      moveSlides: 1,
      slideMargin: 0,
      pause: 4000,
      onSlideAfter: function() {
      obj.startAuto();
      }
    });
  });
 </script>

    The code that I want to change in order to fit amp:

    <amp-carousel
  layout="responsive"
  type="slides"
  autoplay
  delay="3000">
  <amp-img src="<?php bloginfo('stylesheet_directory') ;?>/js/jquery.easing.1.3.js"
    layout="responsive"></amp-img>
  <amp-img src="<?php bloginfo('stylesheet_directory') ;?>/js/jquery.bxslider.js""
    layout="responsive"></amp-img>
</amp-carousel>

    Since the original codes are used in front page, how do I add the new code in function.php for testing instead of affecting the current page?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    It depends on how that non-AMP code was being added in the first place. Is in a theme template? Is it in a plugin shortcode?

    Also, the AMP code you are wanting to use will not work as-is. Why are you referencing JS files in those amp-img elements?

    Thread Starter eddie3240

    (@eddie3240)

    Thanks Weston,

    Since the website isn’t created by me, I check the slider code is written in Header.php.
    So if I add a new code, it will definitely affect all the page.

    Plugin Author Weston Ruter

    (@westonruter)

    You better share the code of your theme, or at least the header.php file.

    Is this a theme that you can make changes to?

    Thread Starter eddie3240

    (@eddie3240)

    Thanks Weston,

    Here the Header.php’s codes that you would like to see.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="target-densitydpi=device-dpi,width=960,user-scalable=yes">
<?php if (is_page('941')) : ?>
<title>?洞浮潜＆珊瑚礁体?潜水 | 黑潮潜水in冲?</title>
<?php else: ?>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<?php endif; ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,print" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" />

<?php
global $page_sort;
	if(get_settings('fresh_sortpages')!='')
	{
		$page_sort = 'sort_column='. get_settings('fresh_sortpages');
	}
	global $pages_to_exclude;

	if(get_settings('fresh_excludepages')!='')
	{
		$pages_to_exclude = 'exclude='. get_settings('fresh_excludepages');
	}
?>

<?php wp_head(); ?>

<!-- jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- eof jquery -->

<!-- bxslider-->
  <script src="<?php bloginfo('stylesheet_directory') ;?>/js/jquery.easing.1.3.js"></script>
<script src="<?php bloginfo('stylesheet_directory') ;?>/js/jquery.bxslider.js"></script>
<script>
$(document).ready(function() {
    var obj = $('.slider').bxSlider({ // 自動再生に必須
      auto: true,
      infiniteLoop: true,
      responsive: false,
      speed: 1000,
      displaySlideQty: 1,
      pager: false,
      slideWidth: 1181,
controls: false,
      minSlides: 1,
      maxSlides: 1,
      moveSlides: 1,
      slideMargin: 0,
      pause: 4000,
      onSlideAfter: function() { // 自動再生に必須
      obj.startAuto();
      }
    });
  });
 </script>
 <!-- eof bxslider-->

<!--analytics-->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-49391487-9', 'auto');
  ga('send', 'pageview');

</script>
<!--eof analytics-->

<script type="text/javascript"><!--
function set_fontsize(size){
$("#main").css("font-size", size);
}
// --></script>

<!-- FEED -->
<script>
$.ajax({
	url: '<?php bloginfo('url'); ?>/category/info/feed',//feedのURL
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
		if (status === 'success') {
			var row = 0;
			var data = [];
			var nodeName;
			$(xml).find('item').each(function(k) {
				if( k == 10 ) { //新着5件まで表示
						return false;
					}
				data[row] = {};
				$(this).children().each(function() { // 子要素を取得
				    nodeName = $(this)[0].nodeName; // 要素名
				    data[row][nodeName] = {}; // 初期化
				    attributes = $(this)[0].attributes; // 属性を取得
				    for (var i in attributes) {
						data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
				    }
					data[row][nodeName]['text'] = $(this).text();
				});
				row++;
			});
			$('#feed1').wrapInner('<ul></ul>');
			for (i in data) {
			    $('#feed1').find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a></li>');
			}
		}
	}
});
</script>
<!-- eof FEED-->

</head>

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="page_side_navi">
<a href="https://heichaodive.com/sns"><img src="https://heichaodive.com/wp-content/themes/standard_black_cmspro/img/page_side_navi1.png" alt="メール"></a>
<a href="https://www.instagram.com/heichaodive/" target="_blank"><img src="https://heichaodive.com/wp-content/themes/standard_black_cmspro/img/page_side_navi7.png" alt="Instagram"></a>
<a href="https://www.facebook.com/heichaodive/app/168188869963563/" target="_blank"><img src="https://heichaodive.com/wp-content/themes/standard_black_cmspro/img/page_side_navi5.png" alt="facebook"></a>
<div><img src="<?php bloginfo('stylesheet_directory') ;?>/img/page_side_navi6.png" alt="台灣教練常駐?全程華語教學" /></div>
</div>

<!-- gnavi -->
<div class="headnavi_kotei">
<div id="headnav">
<ul id="menu" class="clearfix">
<li><a href="<?php bloginfo('url'); ?>/difference/" class="nom" id="head_navi1"></a></li>
<li><a href="<?php bloginfo('url'); ?>/snorkling/" class="nom" id="head_navi2"></a></li>
<li><a href="<?php bloginfo('url'); ?>/diving/" class="nom" id="head_navi3"></a></li>
<li><a href="<?php bloginfo('url'); ?>/" class="nom" id="head_navi4"></a></li>
<li><a href="<?php bloginfo('url'); ?>/dreamreef" class="nom" id="head_navi5"></a></li>
<li><a href="<?php bloginfo('url'); ?>/padi/" class="nom" id="head_navi6"></a></li>
<li><a href="<?php bloginfo('url'); ?>/staff/" class="nom" id="head_navi7"></a></li>
<li><a href="<?php bloginfo('url'); ?>/sns/" id="head_navi8"></a></li>
</ul>
</div>
<div class="navi_yajirushi_bg"></div>
</div>
<!--eof gnavi -->
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Slider image problem in AMP mode’ is closed to new replies.