Amp-carousel of type carousel does not work in legacy paired mode?

  • My mode is legacy paired mode.No add add_theme_support(‘amp’);
    And in my theme create new folder ‘amp’.Which contains cutomizer file template: meta-gallery-image.php,as follows:

    
<?php
global $product;

if ( ! is_object( $product ) ) {
	$product = wc_get_product( get_the_ID() );
}

$product_gallery_ids = $product->get_gallery_image_ids();

if ( empty( $product_gallery_ids ) ) {
	return;
}
?>
<amp-carousel id="amp-wp-carousel"
              class="amp-wp-carousel-with-carousel-preview"
              width="400"
              height="400"
              layout="responsive"
              type="slides"
              controls
              lightbox>

	<?php
	foreach ( $product_gallery_ids as $attachment_id ) :
		$originImage = wp_get_attachment_image_url( $attachment_id, 'full' );
		$originImageAlt = trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
		?>
        <amp-img src="<?php echo $originImage; ?>"
                 width="400"
                 height="400"
                 layout="responsive"
                 alt="<?php echo $originImageAlt; ?>"></amp-img>
	<?php
	endforeach;
	?>
</amp-carousel>
<amp-carousel class="amp-wp-carousel-preview"
              width="auto"
              height="48"
              layout="fixed-height"
              type="carousel"
              controls>

	<?php
	foreach ( $product_gallery_ids as $attachment_index => $attachment_id ) :
		$thumbnailImage = wp_get_attachment_image_url( $attachment_id, 'thumbnail' );
		$thumbnailImageAlt = trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
		?>

        <button on="tap:amp-wp-carousel-with-carousel-preview.goToSlide(index=<?php echo $attachment_index; ?>)">
            <amp-img src="<?php echo $thumbnailImage; ?>"
                     width="60"
                     height="40"
                     layout="responsive"
                     alt="<?php echo $thumbnailImageAlt; ?>"></amp-img>
        </button>

	<?php
	endforeach;
	?>

</amp-carousel>

    type=”carousel” not working,Below is a (screenshot description)[https://user-images.githubusercontent.com/15621520/43236199-6d8e5320-90b6-11e8-9803-70b05aec0e85.png].

    There are several questions in this picture.

    Type is carousel amp-carousel does not work properly.
    amp-lightbox-gallery script not normal working.
    This is amp-lightbox-gallery:

    
function trueniuAmpCustomizeComponentScripts( $data )
{
    $data['amp_component_scripts']['amp-sidebar']          = 'https://cdn.ampproject.org/v0/amp-sidebar-0.1.js';
    $data['amp_component_scripts']['amp-form']             = 'https://cdn.ampproject.org/v0/amp-form-0.1.js';
    $data['amp_component_scripts']['amp-social-share']     = 'https://cdn.ampproject.org/v0/amp-social-share-0.1.js';
    $data['amp_component_scripts']['amp-carousel']         = 'https://cdn.ampproject.org/v0/amp-carousel-0.1.js';
    $data['amp_component_scripts']['amp-lightbox-gallery'] = 'https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js';
    $data['amp_component_scripts']['amp-mustache']         = 'https://cdn.ampproject.org/v0/amp-mustache-0.1.js';

    return $data;
}

add_action( 'amp_post_template_data', 'trueniuAmpCustomizeComponentScripts' );

    Except for amp-lightbox-gallery, other scripts can load normally.

    Is this a bug?Can you test it?

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @bearshang,
    Thanks for letting us know about this. I also saw that the lightbox didn’t work, but it seems to work now. Could you please test it again?

    This is strange, I also saw that the lightbox wasn’t displaying. Including on this bin that I made to test it:

    https://ampb.in/#-LIODJXBsk2N4YATA6Je

    Your screenshot also shows an AMP validation error:

    https://user-images.githubusercontent.com/15621520/43236199-6d8e5320-90b6-11e8-9803-70b05aec0e85.png

    The attribute ‘lightbox’ may not appear in tag ‘amp-carousel’

    And I also saw that in testing it locally. But that now error seems to be gone, and this seems to work.

    Could you please let me know if this works for you now?

    Thread Starter bearshang

    (@bearshang)

    @ryankienstra

    thank you for your reply!
    Just yesterday, I tried to run again.And changed some code:

    
<button on="tap:amp-wp-carousel-with-carousel-preview.goToSlide(index=<?php echo $attachment_index; ?>)">
    <amp-img src="<?php echo $thumbnailImage; ?>"
             width="70"
             height="70"
             alt="<?php echo $thumbnailImageAlt; ?>"></amp-img>
</button>

    You can see that I removed the type=’responsive’ attribute on amp-img.
    Now he can work normally.But the strange thing is that in the official example, even if type=’responsive’ is added, it works fine.

    But,Another problem has not been solved.

    
function trueniuAmpCustomizeComponentScripts( $data )
{
    $data['amp_component_scripts']['amp-sidebar']          = 'https://cdn.ampproject.org/v0/amp-sidebar-0.1.js';
    $data['amp_component_scripts']['amp-form']             = 'https://cdn.ampproject.org/v0/amp-form-0.1.js';
    $data['amp_component_scripts']['amp-social-share']     = 'https://cdn.ampproject.org/v0/amp-social-share-0.1.js';
    $data['amp_component_scripts']['amp-carousel']         = 'https://cdn.ampproject.org/v0/amp-carousel-0.1.js';
    $data['amp_component_scripts']['amp-lightbox-gallery'] = 'https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js';
    $data['amp_component_scripts']['amp-mustache']         = 'https://cdn.ampproject.org/v0/amp-mustache-0.1.js';

    return $data;
}

add_action( 'amp_post_template_data', 'trueniuAmpCustomizeComponentScripts' );

    Have you tested this code?Except for amp-lightbox-gallery script, other scripts can load normally.

    This makes it impossible for me to use amp-carousel-lightbox related features.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Amp-carousel of type carousel does not work in legacy paired mode?’ is closed to new replies.