How to fix lag between images in Fotorama? - javascript

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

Related

How can I integrate srcset in slideshow?

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

click on image to switch to another image colored with the average color of the first

i have this section with a gallery of images, i want to click on an image and switch that image with a second one, this second image should be monochrome, with the average color of the first image. can i achieve this withh css? or with javascript? or i need C# or other languages?
<section class="gallery">
<img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180601_Emma_09_0509-copie.jpg" alt="image">
<img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180701_Schon__010127.jpg" alt="image">
<img src="http://juliecristobal.com/wp-content/uploads/2018/11/SK_FW18_ADDITIONALPIC_06_WEB.jpg" alt="image">
<img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180415_Elodie_05_1176-2-copie-1.jpg" alt="image">
</section>

Change font color and URL Dynamically

I am working on website (HTML+PHP).Here is Fiddle of what I have done so far(sharing one for example).
Each image should point to different URLs.
There are few images whose color matches the font color.I want to change font size/color as image changes. Also URL should also change automatically as image changes.
HTML:
<div class="grid">
<figure class="effect-lexi effect-chocolate">
<div id="cf3" class="shadow">
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="Image" class="bottom" />
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="Image" class="top" />
</div>
<figcaption>
<h2>Dark <span>Chocolate Smoothie</span></h2>
<p>Description</p> View more
</figcaption>
</figure>
</div>
Is it possible ? Can anyone help me with it.?
Thanks,
Using CSS3, you might be able to wield the blend mode to accomplish this.
https://css-tricks.com/basics-css-blend-modes/
Also, you would need to use the JavaScript History to change the URL.
https://developer.mozilla.org/en-US/docs/Web/API/History
Probably the simplest solution is to set the font color as an rgba. For example
color:rgba(0,0,0,.5);
As long as the images aren't black, this will adapt nicely to the color of the background. If you don't have any info from the back end, something along these lines is will probably be the way to go.

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>

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