How can I integrate srcset in slideshow? - javascript

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!!

Related

jquery img max slider using html and css

I have lot of images of products, i need to show as slider using left and right arrow keys.
<div class="popular">
<h3>POPULAR FISH TANK AQUARIUM</h3>
<div>
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
</div>
</div>
Initially need to show four images, and then when i click right arrow another four images need to show, like slider.
May i know how to do that, I tried from online, but it didn't help me, so i reset my code.
Here is left and right arrow button: http://s16.postimg.org/7vbt88k2p/prev_next.png
I need to show like this,
Can anyone please help me to ix this,?
Any help would be highly appreciated.
Thanks,

How to fix lag between images in Fotorama?

So I have a series of images in my image slider from Fotorama. My problem is that
there is a very slight delay when transitioning between different slides for the first time, I imagine because my images are all quite large. Is there any way to easily fix this through javascript or html/css? I read their documentation regarding 'lazy loading' but I'm not sure if that is really applicable for what I want to do. Any advice would be appreciated.
<div class="fotorama"
data-margin="0"
data-transition="slide"
transition-duration="0ms"
data-keyboard="true"
data-swipe="true"
data-click="false"
data-width="100%"
data-height="95%"
data-ratio="3/2">
<img src="images/bgardenflower2.jpg">
<img src="images/yellowflower.jpg">
<img src="images/lushflower.jpg">
<img src="images/flowerbee.jpg">
<img src="images/fly.jpg">
<img src="images/bgardenflower1.jpg">
<img src="images/toad.jpg">
<img src="images/algae.jpg">
<img src="images/lushscape1.jpg">
<img src="images/westvirginia1.jpg">
<img src="images/westvirginia2.jpg">
<img src="images/duskbridge.jpg">
<img src="images/lighthouse.jpg">
</div>
Using photoshop you can save images in webformat, so the images size will be reduced and load quickly...

Javascript changing images is not always working

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>

how to prevent image wrap in responsive mode

how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit
If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/
Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.

Replace Image SRC On CLick

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.

Categories