For some reason, when I first go to a recent page I built, the jQuery Cycle plugin does not work. The site is located here (site is in a different language [Hebrew]).
Regardless of the language it's in, the Cycle plugin works fine in Firefox and IE. I'm wondering if this is a bug on my end or a bug on the plugin's end.
If it's a bug on my end, how can I fix it?
The solution to this problem, based on the fact that Google Chrome fails to properly render the height of the dynamically generated div's (as #ulima69 observed), is to give the wrapping div (.slideshow) a designated width & height that is congruent with the images' width/height.
This fixes the bug for now. If the images were all different dimensions, a more complicated solution should be sought. #ulima69 provided two links to alternative cycle plugins that should work with Chrome. Do what works for you.
Amit
You have to use .load instead of .ready to allow the images to load on the page
$(window).load(function() {
$('.element').cycle();
});
Here is a quick demo for you: http://jsfiddle.net/VpnPb/4/. I have used jQuery 1.6.4 and everything works fine with different image dimensions.
$('#s5').cycle({
fx: 'fade',
pause: 1
});
$('#s6').cycle({
fx: 'scrollDown',
random: 1
});
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
<link href="http://jquery.malsup.com/cycle/cycle.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script src="http://malsup.github.io/chili-1.7.pack.js"></script>
<div id="s5" class="pics">
<img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>
<br/>
<div id="s6" class="pics">
<img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>
Related
I use lazy loading to load the images with the centered background loading icons, but I felt unnecessary to include the lazy loading effect in this question. I want to remove the loading icon after the image is loaded because the smaller images may not cover the loading icon.
I use the same external CSS file for loading icons. None of the closest solutions worked for me.
Any suggestions and help would be appreciated.
HTML
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
CSS
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
You can implement onload event of image, inside it remove class wrapper as
$(".lazy").on('load', function() { $('.wrapper').removeClass('wrapper'); })
Update: if you want to remove only loading for each image change to remove parent class only.
$(this).parent().removeClass('wrapper');
$(".lazy").on('load', function() { $(this).parent().removeClass('wrapper'); })
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
Below is the code i made to recreate issue in a simpler manner
<html>
<head>
<title>test</title>
<style>
#container{
width:500px;
background-color:green;
}
table{
width:100%;background-color:blue;
}
table tr td img{
max-width:100%;
width:100%;
}
</style>
</head>
<body>
<div id="container" style="">
<table style="">
<tr>
<td><img src="http://go-grafix.com/data/wallpapers/20/green-574309-3888x2592-hq-dsk-wallpapers.jpg"/></td>
</tr>
</table>
</div>
</body>
</html>
Basically this works fine in chrome and other browsers
But in IE8, the max-width property is not obeyed. I also tried using the width property still no luck
Any suggestions?
P.S: I dont want to have it in px, i want to have it in % only
Here is the fiddle link
Try by giving width and height properties inline
<img width="100" height="100"/>
or
<img style="width:100;height:100"/>
To make the responsive image. Just apply the style as follows:
<img src="img/xyz.jpg" class="xyz-img" width="100" height="100" />
<style> .xyz-img{width:100%; height:auto;} </style>
I'd like to have a slideshow of my work but I'm new to html/css/jquery. I'm working with a jquery plugin that looks like this:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
HTML looks like this:
<div align="center" id="slideshow">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
<img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
<img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
<img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
<img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
</div>
<div class="controller" id="next"></div>
</div>
I've been modifying the slider id & I've tried everything I know-margin:0 auto;, text-align: center, display: block; but nothing's working. help?
Try this:
Using jQuery
$('#slider img').css({position: 'relative', margin: 'auto'});
Using CSS, you have to use !important as cycle jQuery plugin is adding inline CSS to images
#slider img {
position: relative !important;
margin: auto !important;
}
There is a blank image (blank.png) with background hover effect, which works. I click on the image and it hides, then the video div shows, which works. What I can't figure out is how to get the video to play on the click on original blank image.
I have it working most of the way, but can't get the video to play on click of the image.
I am not the best with scripting.
An example of what I have done:
http://jsfiddle.net/3s8EC/2/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
});
});
});
</script>
<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}
#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg) no-repeat;
}
</style>
<div style="width: 100%; height: 370px; background-color: #000;">
<div id="promovid">
<div class="custom-th">
<img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />
</div>
<div id="thevideo" style="display:none; padding: 0px;">
<center>
<video onclick="this.play();" preload="auto" width="600" height="370">
<source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
</video>
</center>
</div>
</div>
</div>
Any help is appreciated, but since I am not the best with scripting an actual example, or edit the jsfiddle, would be totally super awesome.
Thanks in advance for the help.
Just add a $("video").click();
Like this:
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
$("video").click();
});
});
});
Add an id to the video if you have multiple videos on the page and use it's id instead of "video" in the selector.
I have an IP webcam and upload an image to a weather service. I then capture that image to display in my webpage. In order to do that I searched for some code that would refresh the image without refreshing the page. I found some code (sorry, I don't know who to acknowledge) that I adapted ……..
<script>
var reimg
window.onload=function () {
reimg=document.getElementById('re')
setInterval(function () {
reimg.src=reimg.src.replace(/\?.*/,function () {
return '?'+new Date()
})
},60000)
}
</script>
The next bit is, to a great extent, probably overkill but I have been trying to get it to work (how I want it to look) on all browsers...
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 width="360" height="270" style="overflow:
hidden;border:0;margin:0;width:360px;height:270px;max-width:100%;max-height:100%"
src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?" id="re" scrolling="no"
allowtransparency="true">If you can see this, your browser doesn't understand IFRAME. However, we'll
still link
you to the file.</iframe>
It works fine in Firefox, reducing the 640 x 480 original image to fit. However, in IE and Chrome only the centre top part of the image is shown (i.e. the image is not reduced to fit). Is there any additional code required to ensure it displays correctly (i.e. how I want it, reduced to fit) in IE and Chrome or is it not possible?
How images are displayed is really up to the browser, there is not standard for that. The easiest solution would be to create an HTML file that contains the javascript and a <img> tag for the image instead of loading the image directly into the iframe:
<!DOCTYPE HTML>
<html><head>
<script>
window.onload = function() {
var reimg = document.getElementsByTagName('img')[0];
setInterval(function () {
reimg.src = reimg.src.replace(/\?.*/, function () {
return '?'+new Date()
});
}, 60000);
};
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
img { width: 360px; height: 270px; }
</head><body>
<img src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?">
</body></html>
Save this as "webcam.html" or whatever:
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
width="360" height="270" style="overflow: hidden; border:0;
margin:0; width:360px; height:270px; max-width:100%; max-height:100%"
src="webcam.html" id="re" scrolling="no"
allowtransparency="true">...</iframe>