I put my code here and in jsfiddle for test, the test it´s here :
https://jsfiddle.net/efuw4oh3/4/
And my code it´s :
HTML
<img class="img0" src="https://i.pinimg.com/564x/4f/b7/0c/4fb70c8f19424fb03c957c9e8081357e.jpg" style="display:none;" width="100" height="100"/>
<img class="img1" src="https://i.pinimg.com/750x/28/4c/44/284c443c6c886c905ca8513a0b13ba29.jpg" style="display:none;" width="100" height="100"/>
<img class="img2" src="https://i.pinimg.com/564x/4f/b7/0c/4fb70c8f19424fb03c957c9e8081357e.jpg" style="display:none;" width="100" height="100"/>
<img class="img3" src="https://i.pinimg.com/750x/28/4c/44/284c443c6c886c905ca8513a0b13ba29.jpg" style="display:none;" width="100" height="100" />
MY SCRIPT
<script>
i=0;
$(document).ready(function(){
loading();
});
function loading(){
if(i==5){
i=0;
}
///jQuery("#text").show(1000).hide(1000,function(){reloading();});
jQuery(".img"+i).show(1000).hide(1000,function(){reloading();});
}
function reloading(id){
setInterval("loading()",2000);
//alert("ok"+i);
i++;
}
</script>
The problem basically it´s the images start and show well and the third time, show all images at the same time, and irregular order, i don´t know why because the load of images must be in order, when animation 1 end start the next, etc, and i don´t know why do this
Thank´s for the help, best regards community
The problem you're having is - on the "hide" event you're setting another interval. So, the longer it runs, the more slideshow intervals you'll have running creating this effect.
You should have one slideshow interval that handles the showing/hiding and the increment of the image.
/// Current image
let i=0;
$(document).ready(function(){
loading();
});
function loading(){
// Starts our slideshow
setInterval(startSlideShow, 2000);
}
function startSlideShow(){
/// Shows the image
$(".img"+i).show(1000).hide(1000);
/// Increments
i++;
/// Checks if we're beyond how many images we have.
if(i === 4) i = 0;
}
Fiddle
Related
I’m trying to find a way of playing a cycle of images and hyperlinks via JS or CSS (not sure which would work), in a similar fashion to how a GIF animation functions.
I would ordinarily use a GIF for something like this, but I’m wanting to randomise the order the images are shown with each page refresh (plus I wouldn’t know how to have different hyperlinks for specific frames in a GIF).
Thank you very much, I hope this makes sense
You can do something like this with JavaScript:
var index=0;
var images = document.getElementsByClassName("slideshow");
function changeBanner() {
[].forEach.call(images, function (v,i) {
images[i].hidden = i!==index
});
index = (index+1) % images.length;
}
window.onload = function() {
setInterval(changeBanner, 1000)
};
And your HTML looks like this:
<img src="1.png" width="640px" height="480px" class="slideshow" />
<img src="2.png" width="640px" height="480px" class="slideshow" />
<img src="3.png" width="640px" height="480px" class="slideshow" />
<img src="4.png" width="640px" height="480px" class="slideshow" />
This increments i each second, and removes the hidden attribute from the <img> element with the src of i.png.
I'm very new to PHP and jquery, and am trying to set up an image gallery with thumbnails that when clicked, display a larger image in the div above them.
So far, I have this:
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
$("#large").attr('src',"http://something.com/image.jpg");
});
});
What I want to do is change the image source to be from an array of images. When someone clicks thumbnail A, for instance, I want it to load the corresponding large image A into the div above the thumbnails. I have two arrays, one for the thumbnails and one for the larger images. Seems like a pretty basic thing to do, but like I said, I am totally new at this!
Thanks!
Your javascript code looks correct. Can I see your html code.
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="container">
<img id="large" src="" />
</div>
<div id="thumbnail-container">
<img class="thumbnail" src="large.PNG" width="50" height="50" alt="test1"/>
<img class="thumbnail" src="large2.PNG" width="50" height="50" alt="test2"/>
</div>
<script>
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
$("#large").attr('src',$(this).attr('[REPLACE_WITH_YOUR_LARGE]'));
});
});
</script>
</body>
</html>
And I simply use your js code on the sample above.
You need to pass the array to your javascript first, store in a javascript array, and with proper index (javascript only accept number index), and load it with click event.
there is two way(from my knowledge) to do this.
1) At ur index page, after you load your JS file, you echo <script>loading_function("array_in_string")</script>;, and process the string in JS and store into array.
2) using Ajax, call to server and request for the full list.
In the HTML of the thumbnail images, add a data-tag such as
<img src="image.jpg" data-full-imgpath="http://..." class="thumbnail" />
<img src="image2.jpg" data-full-imgpath="http://..." class="thumbnail" />
Then change your JS to this:
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
var imgPath = $(this).data("full-imgpath");
$("#large").attr('src',imgPath);
});
});
I am having a bit of an issue with image loading in JavaScript. I want a series of images to load sequentially i.e. image 2 only starts loading when image 1 has completely finished loading.
The problem I am finding is that the JavaScript onLoad method does not fire when the image has completed loading, but when the image starts loading. Therefore the smallest image is always going to be the first to load regardless of where in the queue it is. I have put together a simple example of what i mean in JS fiddle (HTML and JS code is below as well).
Any ideas how I can wait until the image has completely loaded before starting to load the next one - it can't be that hard surely?
Note : I originally wrote it using the jQuery .load function and got the same result which is why I was messing about in raw JS.
HTML code:
<ul>
<li><img src="" alt="image 1" width="210" height="174"></li>
<li><img src="" alt="image 2" width="210" height="174"></li>
<li><img src="" alt="image 3" width="210" height="174"></li>
<li><img src="" alt="image 4" width="210" height="174"></li>
<li><img src="" alt="image 5" width="210" height="174"></li>
</ul>
Load the images
JS code:
var imgArr = [
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/zine-HP-UK.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/Valentine_UK.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/crop_UK__.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/hitlist_UK--.jpg",
"http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/chinese_new_year_UK_new_0402.jpg"
],
totalImgs = imgArr.length,
count = 0;
function onLoaded(count) {
console.log("fired onload "+count);
var currentImg = $('li:eq('+count+') img');
currentImg.attr('src', imgArr[count]).css('display','block');
count++;
if (count < totalImgs) {
loadImg(count);
};
}
function loadImg(count) {
imgObj = new Image()
imgObj.src = imgArr[count];
imgObj.onLoad = onLoaded(count);
}
$('#loader').click(function() {
loadImg(count);
});
The problem here is that not the handler function is assigned to the onload event of the Image but the return value of onLoaded. You'd need to say imgObj.onload = onLoaded; For the currentImg you can use this as the handler will be invoked on the Image object. For passing other parameters, an alternative way is needed.
Am sure you moved on from this error seeing it was asked over 2yrs ago; nonetheless I think for the benefit of others I will point out what I believe is your mistake.
You're using imgObj.onLoad instead of imgObj.onload. Javascript is case-sensitive and there is no native "onLoad" event.
The rest of the code should work well when you fix this.
I've been trying to work out how to change image opacities on mouse events. so far I've come up with:
<img src="image.png" style="opacity:1;filter:alpha(opacity=100)"
onmouseup="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
This works great when the image I want to change is the one that is clicked, but I want to change the opacity of another image when you click this on; click an image, make another one appear sort of thing.
I know that the answer has something to do with this.style.opacity but I can't seem to work it out.
I think you need something like this
<img src="image.png" style="opacity:1;filter:alpha(opacity=100)"
onclick="ChangeImage()" />
<img src="image.png" id="image2" style="opacity:20;filter:alpha(opacity=100)"
onclick="ChangeImage()" />
And javascript
<script type="text/javascript">
function ChangeImage(){
var image2= document.getElementById('image2');
//do your work here for image2
image2.style.opacity='1';
}
</script>
I have a series of photos (3 series actually) that need to cycle, which the jQuery cycle plugin does nicely for me.
My problem is I also want to rotate them (rotate as in turn) by a few degrees each in varying directions on page load, to achieve a 'scattered' look. jQuery Rotate does this nicely too ... my problem is I can't get both rotate and cycle to happen on the same page.
It looks as if the solution is going to involve rotating the images within the cycle code itself, but that is beyond my limited capability (at least in the time available). Has anyone else tried this? Got any pointers?
If all else fails, I can pre-rotate the images in photoshop but that's not ideal--the js rotate would mean the photos can be easily refreshed by the site's owner simply dumping new ones in a directory. Photoshop otoh would mean rotating each one -and- converting them from jpg to a format that supports transparency (or even worse, duplicating the appropriate background colours etc in the right places).
I'm using standard jquery.cycle... html pre-loads 1st 3 images like this:
<div id="slideshow" class="pics">
<img class="rotate" src="images/image1.jpg" width="100" height="100" />
<img class="rotate" src="images/image2.jpg" width="100" height="100" />
<img class="rotate" src="images/image3.jpg" width="100" height="100" />
</div>
And I have the usual js that kicks off the cycle:
$(document).ready(function() {
var stack = [];
var imagesPath = '../images/image';
if(window.location.href.indexOf('\/html\/') == -1)
imagesPath = 'images/image';
for (var i = 0; i < 8; i++) {
var img = new Image(100,100);
img.src = imagesPath + i + '.jpg';
$(img).bind('load', function() {
stack.push(this);
});
}
// start slideshow
$('#slideshow').cycle({
timeout: 600,
before: onBefore ,
speed: 2000
});
// add images to slideshow
function onBefore(curr, next, opts) {
if (opts.addSlide) // <-- important!
while(stack.length)
opts.addSlide(stack.pop());
};
});
The js to rotate the first of these images with jQuery.rotate is:
$('.rotate')[0].rotateLeft(5);
The above works if I disable cycling, but nothing happens when cycling is on.
Removing the array reference per the following rotates the visible image, removes it from the slideshow, and leaves it on the page.
$('.rotate').rotateLeft(5);
Perhaps the ideal would be to rotate the containing div instead, but jquery.rotate uses canvas and so only works on images. Let me know if there's any more info I can provide. And thanks for your interest!
JQuery Cycle adds a lot of CSS to the immediate child images of a container in order to turn them into slides. If you want to scatter images on a slide, you should wrap the contents of each slide in a tag. Then tell JQuery cycle that those elements are, in fact, slides by using the slideExpr option.
Html
<div id="slideshow">
<div class="slide">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
<div class="slide">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>
Javascript
$('#slideshow').cycle({
slideExpr: '.slide',
timeout: 600
});
This will allow Jquery cycle to apply it's styles to the wrappers, and JQuery rotate to apply rotations to the contents inside each slide without stepping on each others' toes.
Here's the complete list of JQuery Cycle options.
try using the CSS3 transform selector:
-webkit-transform: rotate(-15deg);
$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' });