JQuery :: Swap Image + Text On Click On Anchored Thumbnails?
Aug 15, 2011
I am creating a custom gallery that I require an image and text to swap on click of an anchored thumbnail. I have successfully managed to change the image on click however I can't seem to manage changing the text. Currently when a user clicks on the thumbnail both the image and text is swapped however when the user clicks on another anchored thumbnail (after clicking on the first) the image swaps correctly but the text does not change My Code
Looking for javascript, to do what i've hap-hazardly slapped together here: I'd like to do this without having to reload a page or create a new page for each image.
[URL]
Specifically the switching of the main image by the thumbnails. The difference in what i've seen online, is that i'm actually using them as a cell background.
I am looking for a version of lightbox that would allow the user to click on a single reference image and when the "lightboxed" version appears a strip of thumbnails would be available at the top or bottom of that image. Thus, the user could navigate between images within the lightbox by clicking on a different thumbnail. If such beast exists a URL would appreciated. Extensive Googling hasn't turned up what I'm looking for at all.
I have four links that use graphics to create an unvisited and visited state (using CSS). The link actually changes a section of text elsewhere on that page, so the user doesn't leave the page. The clicked, visited graphic reflects what text you are reading. You can then select a different link, and new text reflects the link you clicked on. What goes wrong is that if you click all four links, you eventually get all four visited graphics showing.
What I want is this. You click on the graphic and the graphic changes to visited. You then select a different link and that state goes to visited but the previous link that is visited too, changes back to unvisited. Therefore when you click on any link, that visited state is shown, and all others always reset to unvisited. The results is that the visited graphic reflects the current text on that page.
I'm using DreamWeaver CS3's image rollover code, but I'm trying to edit the code so that when you click the image, the hover state stays selected.
Then, when you hover anc click another image, the first image reverts back to it's original state. I've scoured the Internet, but can't find anything that works.
Here's the current javascript code:
Code: <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
I'm failing to get a pure CSS way to achieve this, so trying JS. Several small images in a row, each different. Want mouseover to:
1. change each image to different image on mouseover (each image has its own mouseover image version).
2. produce different paragraph of text below row of images on each mouseover.
I can achieve it with mouseover on text links or on an image, but not with the two events, viz mouseover image swap + mouseover text swap. Would also want to be able to style the text.
I have a list of links that go to pages that have a similar layout. Could I have a text swap, similar to what I've seen with image swaps (or an image switch) whereby instead of loading a seperate page, text and image is just replaced?
Other than not being accessable by non-javascript supported browsers, and unlikely to be indexed by search engines, would I face any other difficulties? For example, does an image/text swap have any browser dependancy issues? If I know that all my clients will have javascript switched on, I'm trying to figure out how much of my audience am I limiting by having this 'feature' (my oldest clients that visit are IE5.5 and Netscape 4 but these make up less than 2% of my entire visitors during the past ten months).
I tried out this script, but then I realized that it wasn't going to work for what I wanted it to do, but i figured I would leave it so you can have an idea of what I need. I am fairly new at javascript and followed a tutorial for this, but because I am new, I can only go so far at the moment..
So here is the site: http://96.9.157.245/~rrochlin/in-the-media/
What is happening now is when you click the little image on the left (in the top black area) changes and shows a new picture. Unfortunately thats CLOSE but not right. I need it to change the image on hover and actually open a link on click/
I know there are multiple threads on how to image swap using javascript. I am doing a portfolio with thumbnails at the bottom. When a thumbnail is clicked, it opens a large image at the top of page and then to the right of the large image, the description of the project appears. Both the large image and the text would fade in and stay until the next thumbnail is clicked. I have this for the script (someone pulled this from a site and gave to me) that works for clicking the thumbnail and the large image shows up:
$(document).ready(function(){ var Idx = 1; var IntervalKey; var ChangeImage = function(){ //If the image still animating, stop it and start the new one $("#MainImage").ImageStop(true,true); $("#MainImage").ImageSwitch({NewImage: $(".TnImage").eq(Idx).attr("src").replace("tn-","med-")}); //Mark which thumbnail is displaying [Code]...
This is what I'm trying to do: I want a simple image container to swap the image inside it by clicking the nav buttons on the right like 1, 2, 3.Here's my code:
HTML Code HTML4Strict: <div id="item1"> <div class="img-container shadow" style="background-image:url(images/gallery/tcg1.jpg)">[code].....
My jQuery code is not right. I want it to turn off the "hover" class and the "show" class of the others when you click one. I think I need some kind of if..else? how to write it? I have a bg image set on the container div so there's an initial image to view.I also need multiple of these on the same page!
i'm quite new to javascript and have an issue with an image swap script. I have three images that should change based on the value of a text field (total), however, there is only one image that is swapping. Please see the code below:
Code: <html> <head> <script type="text/javascript"> //This is where we decare our function to validate the HTML form function validateform()
I have the basic image gallery set up for thumbnails to populate a larger image... i uploaded it quick, take a look: [url]
Only thing i need to do is make the next and back buttons work...i know its something simple im missing if you bring up the firebug console i have several console logs on the next button.
I was viisitingand saw the images fade on the home page. It uses jquery and I was needing some assistance getting this working on my web site. Where would I locate any "how to" documentation?
I'm looking for a very simple image gallery solution (no lightbox or something other fance) with a large image and a x amount of thumbnails at one off the sides, where the big image change whenever another thumbnail is clicked, without page refresh. ( a fade transition would be nice)!Which Plugin, preferably as light as possible, is the most suitable for this task?
I came across this awesome image slider: Thumbnails Navigation Gallery with jQuery. The problem is ..you have to click on "best shots" to see the thumbnail navigation... 1) How do you show this thumbnail navigation straight away on loading the page? (ie "best shots" and other list items dont need to be there) 2) and get the thumbnails show near the bottom of the page? 3) and also get the next image to fade in automatically say after 5 seconds, without having to click on a thumbnail, although one can?
Right, here goes: I'm using a modified "jQuery Cycle Plugin - 'goto' Demo 2 (aka: Poor Man's pager)" implementation of the Cycle plugin, this works fine in FF2+, Op9, Saf3+ and Chrome2 but in IE cycle stops the background- image from repeating! As usual I cannot give out a public link due to NDA but I can give you these two image locations to see the differences: [URL]
I am very new to jQuery and am trying to learn by incorporating and editing things I have done in tutorials into an actual website design.
The problem I am having is how to get some text to slide down from behind an image after it is clicked. So for instance; I'd have an image which says "Things to do" or whatever then when the image is rolled over/clicked some text will slide down from behind the image with links to pages of different things to do.
I think it might be something like what was done in this tutorial: [URL]..but that tutorial uses two images rather than an image and a div with text in it which is what I am trying to achieve.
I've implemented a photo gallery using Galleria and jCarousel on my site, and have chosen to use custom thumbnails instead of having Galleria generate them for me from the source images.
As far as I can tell, there may be an advantage in conserving bandwidth with this method, but the page also degrades to a nice set of thumbnails that link to the larger images (which is very nice, IMO).
Everything works beautifully, however when viewing this gallery for the first time, instead of the large image fading in nicely as it does in the Galleria demo, it almost kind of "slides" the image into view like it's rendering pieces of it as it loads in the container. This is definitely an effect i would like to avoid, but I also thought that one of the benefits of Galleria was that it pre-loaded images in the background, right?
So why does my gallery appear to be loading these images "on-demand"?
I would like to animate a number of thumbnails in a gallery. My idea is to have each thumb transit to another thumb, i.e. you put your mouse over a thumbnail, and it slowly fades to a different image. I have spent a lot of time trying to get this to work, using exhaustive combinations of fadeToggle() and stop(false, false) etc etc and I still can't get a smooth effect.
I have created my own fade engine using a variable that drives the opacity of the image that fades in/out over the other image. My issue is that I would like to get this into a function, as it works beautifully for one image, or if you simply duplicate the code for other thumbnails. The problem is there could be up to 32 thumbnails on the page, which means a lot of repeated code.
I am creating a grid of thumbnails. When a user hovers over a thumbnail, the image enlarges. The *trick* is, I want the "active area" to only be the size of the thumbnail. That is, the thumbnails are 180x120, and when the mouse leaves that area, I want the large image to shrink back to normal size.
I have a working demo here:[url]
The way I accomplished this feels hacky though, and I's like to know if there's a simpler/more elegant way to accomplish it. The thumbs are an unordered list of images.
Here is my javascript:
In essence, I add an overlay div over each thumbnail which acts as the trigger to shrink the enlarged image. I thought I could use the parent <li>, as it doesn't appear to expand with the image (since I've set its size in my CSS) but that didn't work.
New to javascript/jquery, been trying to create a rotator which displays a large image with caption and uses next/previous button and thumbnails for control. Everything works fine but when the rotator gets to the last item i'd like it to go back to the first, and when the previous button is clicked at the first item I'd like it to go to the last.
$(document).ready(function() { //set to zero var x = 0;
I currently have several instances of a video player placed on the page by number of XML nodes. Each player has a source of one of 2 video codecs, dependent on browser as to which one will be read. The issue I am having is that on click of a thumb 1 video player and its corresponding sources is animated into view and plays. That is all fine, yet when selecting a different thumb the previous video continues to play unless I place the statement in green into my click function. This works until I add another node into my xml, and or place more video.pause without videos actually being in the xml (undefined, of coarse). I have been trying to find the syntax to replace the source with the corresponding thumb id (url, url2) and utilize only one player, but I have failed in my searches. Is it possible to swap the source upon clicking on the thumbs? $('video').player.pause(); is not recognized.
First off, I am no professional coder, so bare with me. The goal was to implement a photo gallery using "ImgBrowz0r" (javascript), and a jQuery plugin called prettyphoto, to make the selected photo pop-up in front of the website. I am very impressed by the way it looks thusfar.
URL: Gallery One thing bugs me however, which I can not wrap my head around;
When viewing the above gallery in Windows 7, using IE8, the thumbnails display really weird rollover behavior. The thumbs are not clickable, except for on the 1-px border and sometimes the exact centerlines. I found out that it is an issue everywhere, except on the last row of folder thumbnails. The last row works perfectly fine! Can anyone explain this to me? I am lost!
I have a php script that gets all images in my directory and outputs them as gallery[0]=firstimage.jpg, [1], [2], .. The php script is supposed to work with the javascript, so to cover all angles here is the php
<? //PHP SCRIPT: getimages.php Header("content-type: application/x-javascript"); //This function gets the file names of all images in the current directory //and ouputs them as a JavaScript array
