Develop Reference

Jquery slide images show without control

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

Load external photo with javascript

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');
});

Multiple Image on rollover

What I want to do is have 2 images appear when I rollover an image, the first is achieved by using this code, and is a normal rollover:
<a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('','','images/image2.jpg',1)">
<img src="image1.jpg" alt="imageDesc" width="120" height="125" id="Ammar" /></a>
The second image is an info text box which I went to appear slightly offset from the original (i.e. bottom-right or bottom-left with a slight over lap).
How can this effect be achieved? Here is an example for clarification

If you put your first image in a div and set id="myDiv you can change the contents of the div like this in your onmouseover code
document.getElementById('myDiv').innerHTML="<img ... /> <img ... />";

JQuery Fade out & content replace

I'm currently working on a recommend box for my tumblr. I have a slight issue though. On my blog I have a recommend box that floats on the left of the blog div, #cage. When you click yes, it redirects to a recommend link. When you hit no, I JUST want the div to fade out. For me, once I click no, it fades out fine, but then the #cage div moves over to the left and replaces the space that #recommend was in. Is there any way to just simply fade out the div, then once it's faded out, replace it with an INVISIBLE div, (the same size as #recommed) to it just fades out & the content doesn't move? Thanks. Here's what I have so far, hopefully someone can help.
<div id="recommend">
<img id="Recommend" src="http://i56.tinypic.com/2z7nz9e.png" usemap="#Recommend" border="0" width="200" height="200" alt="" />
<map id="Recommend" name="Recommend">
<area shape="rect" coords="78,113,142,163" href="http://www.tumblr.com/directory/recommend/entertainment/epicjamess" alt="Yes" title="Yes" />
<div id="no"><area shape="rect" coords="144,113,195,163" href="#" alt="No" title="No" /></div>
</map>
</div>
<script>
$("#no").click(function () {
$("#reccommend").fadeOut("fast");
});
}
</script>

Instead of fading, change the opacity:
$("#reccommend").animate({opacity: 0}, 200);
The second argument is the duration of the animation in milliseconds.

U could try
$("#reccommend").animate({opacity: 0}, fast );
But keep in mind, opacity is not supported by all browsers.

Opacity also causes issues with text in IE... Maybe try this:
<script>
$("#no").click(function () {
//wrap it in a div with an id
$("#reccommend").wrap('<div id="reccomend-wrap" />');
//set width of the wrapper to match width of #reccomend, and float it
$("#reccommend-wrap").width($("#reccomend").width()).css("float","left");
//now fade the #recommend out
$("#reccommend").fadeOut("fast");
});
}
</script>
EDIT: To prevent jumpiness it might actually be best to have #reccomend-wrap have the same CSS as #reccomend in your CSS file, rather than adding the float property on the fly..

How to use the jquery.rotate and jquery.cycle plugins together

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)' });