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)' });
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 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
Plugin portfoliojs was my choice for creating a carousel-style portfolio. However, I have discovered that there is no zoom functionality built into the plug in. Due to relative complexity of the jquery code, I am at a loss how to manually add zoom (more precisely, fancybox) functionality to the gallery. The "lightbox=true" initialization option merely dims the other images in the gallery, but does not zoom the image of choice.
Ideally, I would like to add fancybox functionality to my gallery, e.g. my html would look like this:
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
However, the gallery in portfoliojs only works when is child element of ( with no level in between):
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
I have tried to wrap the <img>elements into <a> but it did not work.
Is there a way I could combine the functionality of two plugins ( portfoliojs and fancybox) without significant code rewriting? What would the alternative be?
This is what I would do.
Having an html like this :
<div id="gallery">
<img src="images/01.jpg" alt=""/>
<img src="images/02.jpg" alt=""/>
</div>
where src attribute points to the image to be shown in fancybox, use this code :
var images = [];
$("#gallery").find("img").each(function(i){
images[i] = $(this).attr("src");
$(this).bind("click", function(){
$.fancybox(images,{
index: i
});
})
});
See JSFIDDLE
NOTE: You could use .on() (preferred) instead of .bind() :
$(this).on("click", function(){ ...
it requires jQuery 1.7+ though. See updated JSFIDDLE
I've review some similar questions, but I can't seem to find an answer to tie this all together. I am looking for a way to create a slideshow where images and a corrosponding block of text change every 10 seconds. (Below, when I state Rotate, i do not mean turn on an angle, I mean change from one visible slide to another)
For further clarification, lets call one block of text and one image a "pair". The block of text is contained in one and the image is contained in another . For this slideshow, I will have 10 pairs.
I can easily rotate an image inside utilizing a simple time delay javascript, but if I utilize a similar javascript to rotate the text, sometimes the Image and Text get out of sync with each other (don't change at same time.)
So.... my question is a 2 part question.
1.) Am I approaching this in the correct way, and if so, how do I ensure the text and images stay as pairs and rotate at the same time.
2.) Instead of rotating the content inside of the same div, should I create 10 div pairs (20 total) and create a script just to make 2 of the 20 visible at the same time? if so... any ideas on the script to do so?
Currently, I am using the following script to swap images:
<!--- Start Image Cycler Script --->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 10; // change delay time in seconds
var Pix = new Array
("images2/slide_pics/92028.png"
,"images2/slide_pics/92026.png"
,"images2/slide_pics/92027.png"
,"images2/slide_pics/92534.png"
,"images2/slide_pics/92034.png"
,"images2/slide_pics/92555.png"
,"images2/slide_pics/92700.png"
,"images2/slide_pics/A73495.png"
,"images2/slide_pics/92701.png"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
// End -->
</script>
<!--- End Image cycler Script --->
<img name="ChangingPix" src="images2/slide_pics/92028.png" alt="" width="570" height="346" class="head-pic" />
(Sorry, my last comment decided to post itself)
As Kevin Nelson suggested, I would simply put the image and text in the same containing "block".
<div id="slider">
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
</div>
That way you do not run into any issues with the text and images getting out of sync. There are plenty of free content/image sliders out there. I have been using Slides.js for client work as of late. It is really easy to set up and customize to your liking. It also has plenty of options (e.g. pause on hover, auto play).
Maybe I'm misunderstanding the question, but if you want to rotate text and images at same time, why wouldn't you create blocks and rotate the entire block. See this page:
http://rhmachine.flashfirehosting.com/
If I'm understanding the question correctly and you want something like that, let me know and I'll post the jquery plugin that I'm using to do it.
So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.
Thank you very much for future answers (and possible explanations),
Aaron Brewer
You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.
HTML
<div class="img-container">
<img src="a.jpg" alt="a" />
</div>
<div class="img-container">
<img src="b.jpg" alt="b" />
</div>
<div class="img-container">
<img src="c.jpg" alt="c" />
</div>
jQuery
$('.img-container').each(function() {
// Get a reference to the image.
var img = $(this).find('img');
// Hide by default.
img.hide();
$(this).hover(function() {
img.stop().fadeIn(500);
}, function() {
img.stop().fadeOut(500);
});
});
perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/