I'm trying to use jquery to switch between three images once you click on the image. Upon clicking on the third image, it switches it back to the first picture.
Is there a way to adapt the following to switch between more than two pictures, and for it to allow more than it switching once?
jQuery
$(document).ready(function() {
$("#clickMe").click(function() {
$("#myimage").attr({src : "picture2.png"});
});
});
HTML
<div id="clickMe"><img id="myimage" src="picture1.png" /></div>
Thanks.
This should do that:
$(document).ready(function() {
$("#clickMe").click(function() {
var src = $('#myimage').attr('src');
//if the current image is picture1.png, change it to picture2.png
if(src == 'picture1.png') {
$("#myimage").attr("src","picture2.png");
//if the current image is picture2.png, change it to picture3.png
} else if(src == "picture2.png") {
$("#myimage").attr("src","picture2.png");
//if the current image is anything else, change it back to picture1.png
} else {
$("#myimage").attr("src","picture2.png");
}
});
});
This works:
$(document).ready(function () {
var i = 1; // Used to keep track of which image we're looking at
$("#clickMe").click(function () {
i = i < 3 ? i + 1 : 1;
$("#myimage").html("picture#.png".replace("#", i));
});
});
Online demo: http://jsbin.com/afito
This is link might be helpful
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
Related
I have multiple divs in one html page under common wrapper class.
I am using hide and show method on clicking next and previous option.
What I am trying to achieve: On page reload/refresh, the div which is showing currently should show after page reload.
So in short if you reload/refresh from pink screen, it should show same pink screen after page reload.
What I tried: I am storing the display properties (none or block) is local storage and on page reload trying to give same properties to divs again. Most of the responses and solution I checked in Stack overflow is regarding opening the same tab when refresh. but my case is what in same tab I have multiple div and I want to open from the same state which it was earlier.
Logic I used:
$(window).on('load', function(){
var disp = localStorage.getItem("disp");
var ustatus = JSON.parse(disp);
$(".chk").text(ustatus);
for (var x=ustatus; x<ustatus.length; x++){
$(".pg"+x).css("display", ustatus[x]);
}
});
This is fiddle link I tried:
Page reload demo JS Fiddle link
Your HTML and CSS code is perfect but you need to make corrections in your JavaScript code.
Observation 1 : You "for" loop to assign display style has problem with variable x. You need to assign integer value to x.
Observation 2 : You need to remove that "display" style from "div" elements when you click on "next" and "previous" links.
Hear is new Js fiddle link with updated code.
$(window).on('load', function () {
//localStorage.removeItem("disp");
var disp = localStorage.getItem("disp");
var ustatus = JSON.parse(disp);
$(".chk").text(ustatus);
for (var x = 1; x <= ustatus.length; x++) {
$(".pg" + x).css("display", ustatus[x-1]);
}
});
$(".next").on("click", function () {
$(this).parent().addClass("off").removeClass("on").removeAttr("style");
$(this).parent().next().addClass("on").removeClass("off").removeAttr("style");
});
$(".prev").on("click", function () {
$(this).parent().addClass("off").removeClass("on").removeAttr("style");
$(this).parent().prev().addClass("on").removeClass("off").removeAttr("style");
});
$(window).on('beforeunload', function () {
var display = $(".clr").map(function () {
return $(this).css("display");
}).get();
localStorage.setItem("disp", JSON.stringify(display));
});
You can also download this file. Please run index.html to see the output.
You don't really need the on class:
$(window).on('load', function(){
var disp = localStorage.getItem("disp");
var ustatus = JSON.parse(disp);
$(".chk").text(ustatus);
for (var x=0; x<ustatus.length; x++){
$(".pg"+(x+1)).toggleClass("off", ustatus[x]);
}
});
$(".next").on("click", function(){
$(this).parent().addClass("off");
$(this).parent().next().removeClass("off");
});
$(".prev").on("click", function(){
$(this).parent().addClass("off");
$(this).parent().prev().removeClass("off");
});
$(window).on('beforeunload', function(){
var display = $(".clr").map(function(){
return $(this).hasClass("off");
}).get();
localStorage.setItem("disp", JSON.stringify(display));
});
Fiddle
note: you can't use $(window).on('load', ...) in a fiddle - the JS in the editor is run on load
EDIT: you might also want to validate ustatus before applying it, something like
if (Array.isArray(ustatus) && ustatus.filter(x => x === true).length === 1) {
for (var x=0; x<ustatus.length; x++){
$(".pg"+(x+1)).toggleClass("off", ustatus[x]);
}
}
You can do it without using display, you can use on and off classes, i think that's why they are created for
$(window).on('load', function(){
var disp = localStorage.getItem("disp");
var ustatus = JSON.parse(disp);
if(ustatus!=undefined){
$(".chk").text(ustatus);
for (var x=1; x<=ustatus.length; x++){
if(ustatus[x-1]=='on'){
$(".pg"+x).addClass("on").removeClass("off");
}
else{
$(".pg"+x).addClass("off").removeClass("on");
}
}
}
$(".next").on("click", function(){
$(this).parent().addClass("off").removeClass("on");
$(this).parent().next().addClass("on").removeClass("off");
});
$(".prev").on("click", function(){
$(this).parent().addClass("off").removeClass("on");
$(this).parent().prev().addClass("on").removeClass("off");
});
$(window).on('beforeunload', function(){
var display = $(".clr").map(function(){
if($(this).hasClass('on'))
return 'on';
else
return 'off';
}).get();
localStorage.setItem("disp", JSON.stringify(display));
});
});
I am currently working with the Galleria js Slider.
I need callback to event when a user tries to view slide images 6>
I want to bar users from seeing slide 6 and above and display a popup when he clicks on 6> thumbnails or the forward arrow.
Apologies for my poor Engish.
Can anyone help. Thanks in advance.
I've tried
var gallery = Galleria.get(0);
gallery.bind("loadfinish", function(e) {
if (e.index > 5) {
myCallback();
return false; // Here I need to prevent image showing
}
});
Solution:
var selector = '#galleria-1';
Galleria.run(selector);
$(selector).data('galleria').bind('loadfinish', function(e) {
if(e.index > 4) { // > the fifth image
$(selector +' .galleria-image img').css('opacity', 0);
this.show( 0 );
myCallback();
}
})
Try something like:
Galleria.on('loadstart', function(e) {
if(e.index == 5) {
alert('6th image!');
}
})
http://galleria.io/docs/api/events/#loadstart
I am trying to make a small animation by moving the background position (frames) of the image which is background on my div. I am using Jquery to make this animation happen. I have 6 frames on the background image, first frame starting at 0,0px, second starting at 85px,0, third at 172px,0 and so on.
I want to transition between these frames until stop is clicked. My jquery code is pasted below. I have made an array for the pixels to move across. I want each frame to hold upto 1000 milliseconds, then transition to next frame. I am going wrong somewhere but unable to figure out where..
here is my code
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
}
}
your code looks like has some logical error,run your code ,just can see the same background.
try:
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
var j=0;
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
if (j%framespx.length == i){
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
j++
break;
}
}
}
css({'background-position': xPos+' '+yPos});
okay the above attribute value is a bit confusing for me, hopefully that is correct but with more surety;
css('background-position-x', xPos);
css('background-position-y', yPos);
Now I don't think for loop is mandatory here
var posAry=[0,85,172,256,512,1024];
var currPos=0;
var timer;
$(document).ready(function () {
$("#start").click(function() {
timer=setInterval(move,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function move() {
$('.fixed').css({'margin-left': posAry[currPos]+'px' }); /**you can change it to background postion/padding/... as needed by you**/
currPos++;
if(currPos==(posAry.length))
currPos=0; // for looping back
}
http://jsfiddle.net/7PvwN/1/
There may be an easier way to do this, like with CSS, I think, pseudo-classes or whatever
but anyway for some reason I already wrote this function.
On mouseup it should switch the image back to normal. (Note that the images have the same names except for mouse down the .png is switched with ed.png and the opposite is done for document.mouseup. But document.mouseup isn't even working).
$.fn.buttonify = function () {
console.log("buttonification successful");
var that;
var source;
this.mousedown(function (event) {
var top_value;
var left_value;
that = this;
if (event.which == 1) { //if it is a left click
source = this.src.substring(0, this.src.length - 4);
source += "ed.png";
this.src = source;
console.log(this.src);
}
});
$(document).mouseup(function () {
if (that == null) {
console.log("returninurnging");
return;
}
console.log(source);
source = source.substring(0, source.length - 6); //very questionable code
source += ".png";
that.src = source;
console.log(that.src);
that = null;
});
}
When the mouse is lifted outside the click area, it does not change the image.
Otherwise it works. :(
What do U really want?
<img src="image1.jpg" id="image">
<input type="button" value="whatever" onMouseDown="change()" onMouseUp="undochange()">
JAVASCRIPT
function change()
{
image = document.getElementById ("image");
image.src="image2.jpg";
}
function undochange()
{
image = document.getElementById ("image");
image.src="image1.jpg";
}
Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>
A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;
Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.
...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.
Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);