Here's the HTML code and the Javascript.
<div class="col-md-6 col-lg-4">
<div class="work-box">
<div class="work-img" id="Starcraft">
</div>
<div class="work-content">
<div class="row">
<div class="col-sm-8">
<h2 class="w-title">Starcraft Animation</h2>
<div class="w-more">
<span class="w-ctegory">Code</span>
</div>
</div>
<div class="col-sm-4">
<div class="w-like">
<a href="img/StarcraftAnimation.png" data-
lightbox="gallery-mf"> <span class="ion-ios-plus-outline"></span></a>
<a href="img/StarcraftAnimation2.png" data-
lightbox="gallery-mf"> <span class="ion-ios-plus-outline"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var myIndex = 0;
function carousel() {
if(myIndex==0)
document.getElementById('Starcraft').innerHTML = ('<picture><source srcset="img/StarcraftAnimation.webp" type="image/webp" class="img-fluid"><img src="img/StarcraftAnimation.png" alt="StarcraftAnimation" class="img-fluid" ></picture>');
else
{
document.getElementById('Starcraft').innerHTML = ('<picture><source srcset="img/StarcraftAnimation2.webp" type="image/webp" class="img-fluid"><img src="img/StarcraftAnimation2.png" alt="StarcraftAnimation" class="img-fluid" ></picture>');
}
myIndex++;
if (myIndex > 1) {myIndex = 0}
setTimeout(carousel, 5000); // Change image every 5 seconds
}
carousel();
</script>
I need to serve up some webp and alternate between two images with a fallback to png. It works but I want to know if there is a better way than redoing the innerhtml and just switching the srcset instead. Don't want a flicker as well.
Try imagekit.io that can automatically serve the right image format
Disclaimer: I am the co-founder at ImageKit.io
Related
i can't find solution for this bug
i wrok on site web multi language but i can't don't know how to fix this bug
class translate{
constructor(){
document.getElementById("fr").addEventListener('click', ()=>{
this.translate("fr");
});
document.getElementById("en").addEventListener('click', ()=>{
this.translate("en");
});
this.translate(localStorage.getItem("language"));
}
translate(language){
if(language == "fr"){
document.getElementById("myAnchor").href = "http://www.cnn.com/";
}
else if (language =="en"){
document.getElementById("myAnchor").href = "http://www.google.com/";
}
localStorage.setItem("language",language);
}
}
onload = new translate();
code Html and link i need to change
<div class="contenu-space-two">
<div class="row mx-0">
<div class=" col-2">
<img src="./resources/_images/shopping-cart.png" class="logo-link" alt="">
</div>
<div class="col-lg-4 col-md-6 col-8" >
<h4 class="lang" key="boutiques">Boutiques</h4>
</div>
<div class="col-2">
<a id="myAnchor" href="#"><img src="./resources/_images/arrow-link.png" class="arrow-link" alt=""></a>
</div>
<hr class="line_link">
</div>
and this code language
<div id="langContainer">
<a class="translate" id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a class="translate" id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
This variable has probably already been declared.
Check this js file and the others the page references.
If there are many you can try to change the name of this class.
I'm coding my website with bootstrap (to make it responsive, and it's easier to update for me) and I'd like image to display when I over a text.
here's the code:
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
I would like the ihp_poster01.JPG image to appear when I hover "INSTITUT HENRI POINCARRE, POSTER — 2017". I've tried multiple things which didn't worked because the img and the text are not in the same <div>.
I guess I'll have to use Javascript, but I didn't found any JS for that :/
Can someone help me?
thanks
You can use mouseenter & mouseleave events (using JavaScript of course) on text and toggle the display style of image accordingly...
window.onload = function() {
var name = document.getElementById("name");
var image = document.getElementById("img");
name.addEventListener("mouseenter", function( event ) {
image.style.display = "block";
});
name.addEventListener("mouseleave", function( event ) {
image.style.display = "none";
});
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="img" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
Update: To make this dynamic and handle different text with different images one can use onmouseenter & onmouseleave with common JS function, have a look at the snippet below:
function toggleShow(elementId) {
let el = document.getElementById(elementId);
el.style.display = "block";
}
function toggleHide(elementId) {
let el = document.getElementById(elementId);
el.style.display = "none";
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image1" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image2" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
I'm using angular 5 for displaying pages that have a lot of images with high res, and it takes too long to load.
What I want to do is to make a splash screen, a div that will cover the full screen, and after all the images finish loading it will disappear.
How and where do I implement this in angular 5?
window.onload = someFunction; // is not working well
page.component.html:
<div id="page" class="page">
<div id="splash"></div>
<div id="home-page">
<div class="container d-none d-lg-block">
<img src="assets/images/home/line_with_bird.png" alt="">
<div class="row">
<div class="col-3 ad-paper">
<img src="assets/images/home/paper.png" class="" alt="">
</div>
<div class="col-2">
<img id="arrow-word" src="assets/images/arrow_word.png" alt="">
<img id="ladder" src="assets/images/ladderLong.png" alt="">
</div>
<div class="col-6 offset-1 c2">
<div id="window"></div>
<div class="smicos">
<app-socialmedia style="width: 641px;"></app-socialmedia>
</div>
</div>
</div>
</div>
</div>
page.component.ts
ngOnInit() {
function splash() {
console.log('tttttttttttttttttttttttttttttttttttttttttt');
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
window.onload = splash;
}
Do not hide your splash screen on ngOnInit. Instead do this:
Keep count of images you are showing in controller.
totalImages = 20;
Keep a load handler on each image;
<img (load)='checkAllLoaded()'>
In checkAllLoaded function, check if all images are loaded:
checkAllLoaded() {
this.totalImages = this.totalImages - 1;
if(this.totalImages === 0) {
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
}
Set a div with *ngIf on a property which will turn to true only when the image is loaded.
<div class="splash" *ngIf="!loaded"></div>
<img [src]="img" (load)='loaded=true'>
DEMO
I looked through the FAQ but couldn't figure out what was causing this (in js). I'm trying to get something live soon and I'm bypassing better animation for the time being, possibly also AJAX.
What I'm going is bringing two external php pages a includes to the current page, one is a gallery slider and the other is where the gallery imagery will appear. Here is a link to the page I'm currently testing so you can see:
http://www.chrisjohndesigns.com/artwork-conventions.php
So the code I've used has been simple replacement .innerHTML calls where the left and right arrows call the next gallery div and then the thumbnails within that gallery call the artwork that appears below. The left and right arrows work just fine but as soon as any of the thumbnails are clicked (and they do work properly) the left and right arrows stop working and you're stuck on whatever frame you chose from.
Here is the code from the conventions page:
<div id="field">
<div id="gallery-callout">
<div class="thumbs-slider-field-container" id="generic-slider">
<div class="thumbs-slider-field" >
<div id="prev">
<img src="images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
</div>
</div>
<div class="rule">
</div>
<div class="entry" style="margin-bottom:0px;">
<h4 style="color:#ffffff; margin:0px;">| artwork > conventions</h4>
</div>
<div class="gallery-frame" id="generic">
<h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
<div class="artwork">
<img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />
</div>
<div class="rule">
</div>
<p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>
<div style="display:none;">
<?php include("artwork-gallery-digital.php"); ?>
<?php include("sliders/slider-artwork-conventions.php"); ?>
</div>
</div>
The js I'm using:
<script type="text/javascript">
altViews = function(next_img) {
document.getElementById("bigPicture").src = next_img;
}
function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML;
}
</script>
An example of the slider:
<div class="thumbs-slider-field" id="conventions1">
<div id="prev">
<img src="../images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="../images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
Any thoughts why one is canceling out the other?
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/