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.
Related
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
I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?
I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});
I am working on a website that needs to use javascript. I need the Javascript to use an external page. I don't quite understand how to do this. I have 5 files on my computer that needs to be able to replace an image file's name and alt. I cant use an http though.
I have the code for an image:
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
I need use javascript to change the cablecare and alt part to a new image file and description while using onmouseover.
The code I have so far is
Javascript:
function switchPix(file, desc){
var line = '<img src= asian.jpg width=\'480\' height=\'270\' alt= +desc+/>';
document.getElementById("pix").write(line);
}
html:
<figure id="pix" class="right">
<script src="scripts/gallery.js">
</script>
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
</figure>
<ul>
<li>Asian Art Museum</li>
I have to use the word file to replace cablecar with asian so the file name is asian.jpg
at the end the code is suppose to change the image on the page to another image when the mouse is put over one of five links.
Sorry if this is a bit confusing I really am having trouble understanding it myself and wasn't given nearly enough information to understand how to do it myself.
Hi try to use this code
<figure id="pix" class="right">
<script src="scripts/gallery.js">
</script>
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
</figure>
<ul>
<!-- fix onmouseover (all small case) and string parameters -->
<li>Asian Art Museum</li>
and the javascript code like this work
function switchPix(file, desc) {
var $elm = document.getElementById("gallery");
$elm.src = file;
$elm.alt = desc;
}
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 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)' });