I have a jquery accordion that I have setup with info. What I am trying to do is change an image off to the right of this accordion and the image depends on what accordion selection they selected. I am not experienced enough with jQuery to figure this out. The link is below and you can see what it is that I am explaining here. If you have time check it out. The image to the right is the one that needs to swap out to another depending on accordion selection. Any help would be greatly appreciated.
http://luistovar.com/sandbox
Thanks in advance!
The easiest way is to write some new code, instead of adding code to your existing accordeon menu code (of course you can integrate it in your existing code for the accordeon).
Place your 4 images absolute(!) on top of each other. Because of that, you'll only see one of them. Give them a class, for instance .picture. Give each picture an ID, for instance #picture1.
Give all your a tags an ID, for instance #menu_item1.
Then use the following and jQuery.
$("#menu_item1").click(
function(){
$(".picture").fadeOut(200, function(){
$("#picture1").fadeIn();
});
});
Copy this for each menu item/picture and adjust the numbers.
There are ways which end up with less code, but in this way it's easy to comprehend.
I haven't checked it, but I hope it'll help you. It should give you a small fade effect, which you can tweak by adjusting the number 200 into a smaller or bigger number (milliseconds).
Good luck!
Related
I made a simple image slider to show the houses at sale of a properties website, but the slider doesn't slide the whole width of the divs containing the images. I made a codepen at
http://codepen.io/anon/pen/Eamns to illustrate what I mean, does someone know how can I slide the element without leaving a small bit of it visible? Somehow I don't like to use the whole lot of sliders that are out there, but building my own. I'll appreciate any help, as you can see I'm using the outerWidth and margin properties to determine the distance of the slide, but it's not very clean and I still don't like it.
Thanks in advance
[1]: http://codepen.io/anon/pen/Eamns
Not sure if your CodePen is complete. If you want something clean and easy to implement, I recommend using the 'jquery cycle' plug-in (http://jquery.malsup.com/cycle/) to create your slider. It is the easiest way I have found to make many types of image sliders.
I want to an image gallery. On the left side all thumbnails are there. When i mouse hover into thumbnail, the full image will be displayed into the left side div or table. So please tell me the correct code or plugin or anything.
The image gallery exactly looks http://www.rakindia.com/products.aspx?subcat=SW-0000702
Please friends i am trying from 2 days i can't find any plugin and code. Please help me
(i AM TRYING FOR MULTIPLE IMAGES)
I would do it inline to save overhead. You do not need a plugin for such a simple request, not even jQuery, but pure javascript.
DEMO http://jsfiddle.net/8U3C7/
Swap the src image on mouse down
<img src="myFirstImage.jpg" onmousedown="document.swap.src='myFirstImage.jpg';" />
Although you didn't explain yourself clearly, this is a WORKING DEMO for you. Next time try describe yourself better in English, and show people at least what you have tried not to ask for a simple solution.
Uses just plain js and css.
function updateIMG(e) {
document.getElementById("preview").src = e;
}
try this plugin it's quite similar to against your requirement: Galleriffic
I have made an image using photoshop of a mock design of the page so you can visually see what I am trying to achieve.
Please look at the image at the end of this question whilst trying to answer.
Updated Question:
At this moment in time I have no code, I was wondering if someone could point me in the correct direction. I am making an online application using Ruby on Rails. At this moment I am not worried about the Rails side, I firstly want to conquer the JQuery. I have six sauces, each with a name, a picture, and a desctiption. What I want to achieve is the page starts on sauce one as shown in the picture, when the right arrow is clicked, sauce number 1 becomes sauce number 2, the picture changes, and the relevant description changes (i.e. sauce number 2's description.
My main problem is I do not know how to fit the relevent content between the two arrows, and then get them to change as the arrows are pressed. I.e. the user can click the right arrow once and I can change the contents, but how to I set the jQuery so that when the arrow is clicked the second time, it becomes the second sauce, the third time the third sauce and so on, as in chronological order, so when they click the back arrow it goes to the sauce before the current one.
In a nutshell everything happens dynamically, not that I have divs all ready, and the JQuery just truncates through them (i.e. not a Jquery div slider).
Here's the image:
I would recommend using an already made jQuery slider, like this one:
http://basic-slider.com/
For each li used in the slider, have a div with the image and description. You would need to modify the slider css a little bit but I think it would be a lot easier than making a slider yourself.
These are a good start for achieving what you want with jquery:
Animate: http://api.jquery.com/animate/
Capture a click: http://api.jquery.com/click/
Show/hide elements: http://api.jquery.com/show/ http://api.jquery.com/hide/
Set the html of an element: http://api.jquery.com/html/
If you have a problem with anything specific with these functions, you can ask again or just search Stackoverflow, there's a good chance whatever questions you might have have been answered already.
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
Hello I'm quite new to using jQuery and I was trying to create a menu that showed different pictures when you moused over the links. It will show one picture and hide 4 others and when you mouse off a link it will go back to a default picture. I'm using the hover function but sometimes when I moved the mouse to the bottom both images (the one related to the link and the default) both show up and I was wondering if there was some check I could do to make sure that this didn't happen. Here's what my code looks like.
$("#blog-img").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog").hover(
function(){
$("#default").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog-img").show("slow");
},
function(){
$("#blog-img").hide();
$("#default").show("slow");
}
);
I would love any help I could get on this.
You are possibly creating a race condition by using timing to show the images.
When both images are shown it's probably because the at least one of the Shows has been executed before the first executed one completes. This can happen when you move fractionally -we're talking pixels - into/out of the object with the hover.
I recommend using CSS to resolve this. It's much cleaner than using Javascript.