I want to create an image gallery inside a div, a very simple one. i want to be able to use it in a tablet so i need it to respond to swipe movements.
<div class="img-cont" style="display: block;">
<img src="" style="max-width:100%; max-height:100%;">
<img src="" style="max-width:100%; max-height:100%;">
<img src="" style="max-width:100%; max-height:100%;">
<img src="" style="max-width:100%; max-height:100%;">
<img src="" style="max-width:100%; max-height:100%;">
</div>
Swipe is currently such a mainstream functionality why isn't there something simpler?
Like the one presented here but not so complicated:
http://smoothdivscroll.com/touchScroller.html
Related
This side-effect is undesirable as affecting SEO.
Current outputted markup for amp-carousel is:
<amp-carousel width="620" height="404" type="slides" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
<i-amphtml-sizer style="display:block;padding-top:65.1613%;"></i-amphtml-sizer>
<figure class="slide">
<a href="https://website.com/image">
<amp-img width="620" height="413" src="https://ebsite.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921230-846x564.jpg" class="attachment-large size-large amp-wp-enforced-sizes i-amphtml-layout-fill i-amphtml-layout-size-defined" alt="" aria-describedby="gallery-2-1461806" layout="fill" object-fit="cover" disable-inline-width="" i-amphtml-layout="fill">
<noscript><img width="620" height="413" src="https://website.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921230-846x564.jpg" class="attachment-large size-large" alt="" loading="lazy" aria-describedby="gallery-2-1461806" sizes="(max-width: 620px) 100vw, 620px"></noscript>
</amp-img>
</a>
<figcaption class="amp-wp-gallery-caption">
Betty and Peppino Lapadula.
</figcaption>
</figure>
<figure class="slide">
<a href="https://website.com/image/">
<amp-img width="620" height="404" src="https://website.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921221-866x564.jpg" class="attachment-large size-large amp-wp-enforced-sizes i-amphtml-layout-fill i-amphtml-layout-size-defined" alt="" aria-describedby="gallery-2-1461815" layout="fill" object-fit="cover" disable-inline-width="" i-amphtml-layout="fill">
<noscript><img width="620" height="404" src="https://website.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921221-866x564.jpg" class="attachment-large size-large" alt="" loading="lazy" aria-describedby="gallery-2-1461815" </noscript>
</amp-img>
</a>
<figcaption class="amp-wp-gallery-caption">
Betty and Peppino Lapadula.
</figcaption>
</figure>
</amp-carousel>
Whereas the documentation both v0.1 and v0.2 doesn't have this nested <a> tag.
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
I've created a custom template in an attempt to load the v0.2 script in the <Head> to "override" this possible v0.1/v0.0(?) <amp-carousel> however this hasn't worked.
The content for the AMP template is being pulled from this:
<div class="amp-wp-article-content">
<?php $content = $this->get( 'post_amp_content' );
echo $content;
?>
</div>
So in addition to asking for advice on how to strip the <a> tags out of the carousel I am curious if there is a way to edit this $content before printing it?
I have tried to utilise <amp-script> however upon wrapping this div above it breaks the template so I'm unable to write simple js to strip the nested <a> tags.
I was originally of mind that this nested <a> was the result of the non-amp site using Lightbox however I have successfully managed to create an article which emulates the content with lightbox turned off so I am somewhat confident in ruling this out.
To summarise:
a) any help on how to edit the $content before post in an attempt to strip the nested <a> 's
b) how to address this <amp-carousel> issue when my custom template is using $content to print
c) <amp-carousel> not matching markup of documentation
My website contains a slideshow. I want to change the image, depending on the viewport size. This has been solved with following code:
<picture>
<source media="(min-width:650px)" srcset="images/slider/4.gif" >
<source media="(min-width:200px)" srcset="images/slider/4_m.gif" >
<img src="images/slider/4.gif" alt="" style="width:auto;" >
</picture>
The image works, dependently on the viewport size. My problem - I want to integrate in this code here:
<div class="slider-area">
<div class="bend niceties preview-2">
<div id="ensign-nivoslider" class="slides">
'Following line should be replaced with code above...
<img src="images/slider/4.jpg" alt="" title="#slider-direction-1" />
<img src="images/slider/5.jpg" alt="" title="#slider-direction-2" />
<img src="images/slider/6.jpg" alt="" title="#slider-direction-3" />
</div>
4th line should be replace by code above, but it doesn't work out. Can someone help?
Thanks in advance!!
I have some code I have written for a image gallery on my page, "gallery.aspx". The scenario is that I have an external aspx page with different links. When I click on one of those link I want to redirect to this image gallery but to a specific image.
For e.g I have a page called "home.aspx" with a link called "img2". When I click on "img2" I want to open up this image gallery(which sits on a page called "gallery.aspx"), but I want tab 2 of the gallery to be opened so 2nd image.
I can get it to work on my html pages using (url/gallery.html?img=img2) but I would really like to be able to do it on my sharepoint aspx page.
Thank you in advance.
My HTML code is as follows:
<div class="gallery" align="center">
<div class="thumbnails">
<img name="ift" onclick="preview.src=img6.src" id="img6" src="IFT.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img1.src" id="img1" src="Clear.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img2.src" id="img2" src="Agile.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img3.src" id="img3" src="AllForOne.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img4.src" id="img4" src="Decide.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img5.src" id="img5" src="Possibilities.png" alt="Image Not Loaded"/>
</div>
<br/>
<div class="preview" align="center">
<img id="preview" src="IFT.png" alt="No Image Loaded"/>
</div>
Aspx also support HTML. You could just put these code to your ASPX page. No changes would be required.
I made a menu with images.
I have 2 divs with 3 images inside each so i make it to look like a menu. When I click the above image the image under it changes to highlight the above.
The JavaScript works but if I click the images many times some times its not working properly.
So how can I be certain that JavaScript wont lag? I cant figure out if its coding problem or placement or anything else...
By not working Properly i mean that if i click the images a lot of times some times the image that should change to highlight the top image arent changing i dont know if its my computer or not..
Here is Code http://codepen.io/DarkLord22/pen/Ghwbj
<div class="Menu1">
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_1.jpg" width="395" height="300" onclick="changeImage1() , removeImage1()"></div>
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_2.jpg" width="395" height="300" onclick="changeImage2(), removeImage2()">
</div>
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_3.jpg" width="395" height="300" onclick="changeImage3(), removeImage3()">
<div id="Menubluebuttondiv">
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_blue_arrow.jpg" width="395" height="42" id="toChange1"></div>
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_Bluearrow2.jpg" width="395" height="42" id="toChange2">
</div>
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_Bluearrow2.jpg" width="395" height="42" id="toChange3">
</div>
</div>
I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.