How do i apply a basic jQuery to my image gallery?

I'm using jQuery in order to allow an image gallery to show the same product in various colours. However the jQuery I'm using, animates the next image to sweep in from the left. And i just want the images to change in a basic way, so one image is on the screen at all times. Could someone please help me?
This is the current jQuery I'm using.
<script>
$(document).ready(function () {
    $("#red").click(function () {
        $("#img-red").show('');
                                $("#img-etchedglass, #img-blue, #img-green").hide();
    $("#blue").click(function () {
        $("#img-blue").show('');
                                $("#img-etchedglass, #img-red, #img-green").hide();
    $("#green").click(function () {
        $("#img-green").toggle('');
                                $("#img-etchedglass, #img-red, #img-blue").hide();
    $("#etchedglass").click(function () {
        $("#img-etchedglass").show('');
                                $("#img-blue, #img-red, #img-green").hide();
</script>
I have already asked on a previous stream, but could do with this sorted asap.
Thanks!!

If you have individual product images why don't you just write them to one <div> on the page (example below)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#red').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">');
$('#blue').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183385/1833845416/aglais-urticae---little-fox-1441799-m.j pg" alt="">');
$('#green').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/45/443536/blue-butterfly-1433138-m.jpg" alt="">');
</script>
</head>
<body>
<div id="productImage">
<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">
</div>
<a href="#" id="red">Red</a>
<a href="#" id="blue">Blue</a>
<a href="#" id="green">Green</a>
</body>
</html>

Similar Messages

  • How can I apply a visable grid to an Image Control?

    I have an application where I do some image processing to measure a 'spot' on an image.  I then create a report that provides the measurement results.  Part of the report consists of the image and I need a visible grid sized to the magnification of the image (please see attachement for an example created by other means).  I cannot seam to find anything in Labview to do this.  Please help me out if you have any suggestions.
    Thanks.
    Attachments:
    NeededLook.jpg ‏92 KB

    One possible simple solution would be to put a graph over the image display. Make everything transparent, except the grid lines.
    If this suits you, we can elaborate further.
    Message Edité par chilly charly le 10-26-2007 05:04 PM
    Chilly Charly    (aka CC)
             E-List Master - Kudos glutton - Press the yellow button on the left...        
    Attachments:
    Example_FP.png ‏8 KB

  • How to apply a gradiant to a photoshop image?

    How do I apply a gradiant to a photoshop image?
    I have tried looking at a number of online blogs and instructions but they were the wrong version -- or they assumed too much knowledge that I did not have and thus stepped over some steps.
    I am using Photoshop version CS6

    Here's a visual illustration of Charles' technique to help you along:
    a.) Set the foreground color to white.
    b.) Go to Layer > New > Layer
    Select the gradient tool.
    Select the white transparent gradient in the drop down gradient menu.
    Now draw your gradient.  You can select different gradient patterns by clicking the buttons next to the drop down gradient menu.

  • How do you apply the EQ settings to a particular genre or album?

    How do  you apply the EQ settings to a particular genre or an album instead of individually applying the setting to one song at a time.

    It's probably easiest to first be in list view and have your Column browser up.
    Set the Column Browser to show Genres.
    In the Genres column, select the Genre you want to apply the EQ to. Now select all of the songs that appear for that genre. 
    Right-click on the blue mass and select "Get Info". Say yes to the dialog asking if you're sure you want to edit information for multiple items.
    In the Options tab of the Multiple Item Information window, check "Equaliser preset", pick the equaliser setting you want and click "OK".
    Processing may take a while if you've got a lot of songs in that genre.
    For an album, it's basically the same process.
    Set the Column browser to show albums.
    In the Albums column, select the album you want to apply the EQ to. Now select all of the songs that appear for that album.
    Right-click on the blue mass and select "Get Info". Say yes to the dialog asking if you're sure you want to edit information for multiple items.
    In the Options tab of the Multiple Item Information window, check "Equaliser preset", pick the equaliser setting you want and click "OK".

  • How can i apply border for fluid grid layout div

    How can i apply border for fluid grid layout div

    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="CSS/Layout.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <!-- Place in the <head>, after the three links -->
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider();
    </script>
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
      <div id="LayoutDiv2">
      <div class="flex-container">
      <div class="flexslider">
        <ul class="slides">
          <li>
            <img src="SJV-Images/Stud1.jpg"/>
          </li>
          <li>
            <img src="SJV-Images/Stud2.jpg" />
          </li>
          <li>
            <img src="SJV-Images/Stud3.jpg" />
          </li>
        </ul>
      </div>
    </div> </div>
      <div id="Nav">This is the content for Layout Div Tag "Nav"</div>
      <div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
      <ul>
      <li>
      It is one of the oldest school.</li>
      <li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
       <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
      <li>The campus now has separate buildings within the campus for year 1 to  year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>
      <li>The school has montessori facilities in a separate building.</li>
      <li>The School also has boarding facilities for students from distant places.</li>
      </ul></div>
      <div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
      <h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
    <div id="Photo_Gall"><center>
        <strong>PHOTO GALLERY</strong>
    </center>
      <p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
    </div>
      <div id="News_Events"><center>
        <strong>NEWS & EVENTS</strong>
      </center><center>Annual Day<br><center>
        Alumni Meet<br>
        Exam Time Table<br>Parents-Teacher's Meet</center>
      </center>
      <br></div>
      <div id="footer">This is the content for Layout Div Tag "footer"</div>
    </div>
    </body>
    </html>

  • How can i apply adobe bridge in my ipad 2?

    how can i apply adobe bridge in my ipad 2?

    As when installing an app on a computer, there must be a version for the app that is compatible with the computer and the OS running the computer.
    Is there an Adobe Bridge app for the iPad available via the iTunes app store?

  • How do I apply programmatic skins for completely custom drawn components of a Flex library project?

    Hello folks,
    I am looking for best practices advice when (1) creating
    custom components and (2) styling and skinning.
    I already know how to skin a component part of the Flex
    framework. I can make a class extending ProgrammaticSkin and have
    my component skinned using CSS to link the component with the
    reference to my custom class.
    However what about those cases when you are completely
    creating a component from scratch?
    Imagine a "Freehand Drawing Canvas" component that allows the
    user to draw on it and has some buttons to set color styles, line
    styles, etc., or imagine a "Screen Flow Gallery" component that
    displays visual objects in a fashion similar to Cover Flow in the
    Mac.
    In many components I am aware you may reuse other components
    part of the Flex framework but I am trying to picture an scenario
    where you would need to draw everything yourself because there just
    isn't something to base it upon so you will end up drawing it from
    scratch.
    To learn how instead of building one of those components I
    mentioned previously I decided to start with something simple that
    would illustrate this like a LiteButton component that will behave
    just like the Flex mx.controls.Button but will extend UIComponent
    and be completely custom drawn.
    The component will have a default look and will also be
    style-able and skin-able. I will provide styles for users of the
    component to modify and regarding skinning anyone can create a
    custom ProgrammaticSkin adding its own drawing logic and link it to
    the component via CSS with the ClassReference applied to the skin
    selector.
    So far so good and it's clear what I want to achieve. I
    actually know how to do most of the stuff here but I have one
    single problem.
    Here is my question, where should I put my custom drawing
    logic? If I do it in the updateDisplayList inside the class
    extending UIComponent it works, however I thought that it would be
    a better practice to do it using programmatic skins, that way I
    could provide different skin themes for my component set.
    The problem is that I can't make the programmatic work in
    this scenario. I tried instantiating the custom programmatic skin
    during the updateDisplayList of the LiteButton component and adding
    it to my display object via addChild but that didn't do anything. I
    also tried creating a "default.css" stylesheet and tried to use
    ClassReference as I would normally do to skin an already existing
    component (or composite component as well) but that didn't do
    anything either.
    So how do I apply programmatic skins for completely custom
    drawn components of my Flex library project?
    I could do it inside the updateDisplayList of the LiteButton
    class extending UIComponent but again I would like to provide
    different theme sets for my components so it makes sense using
    programmatic skins.

    "jbucaran" <[email protected]> wrote in
    message
    news:[email protected]...
    > Hello folks,
    >
    > I am looking for best practices advice when (1) creating
    custom components
    > and
    > (2) styling and skinning.
    >
    > I already know how to skin a component part of the Flex
    framework. I can
    > make
    > a class extending ProgrammaticSkin and have my component
    skinned using CSS
    > to
    > link the component with the reference to my custom
    class.
    >
    > However what about those cases when you are completely
    creating a
    > component
    > from scratch?
    >
    > Imagine a "Freehand Drawing Canvas" component that
    allows the user to draw
    > on
    > it and has some buttons to set color styles, line
    styles, etc., or imagine
    > a
    > "Screen Flow Gallery" component that displays visual
    objects in a fashion
    > similar to Cover Flow in the Mac.
    >
    > In many components I am aware you may reuse other
    components part of the
    > Flex
    > framework but I am trying to picture an scenario where
    you would need to
    > draw
    > everything yourself because there just isn't something
    to base it upon so
    > you
    > will end up drawing it from scratch.
    This may help with that
    http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html
    > To learn how instead of building one of those components
    I mentioned
    > previously I decided to start with something simple that
    would illustrate
    > this
    > like a LiteButton component that will behave just like
    the Flex
    > mx.controls.Button but will extend UIComponent and be
    completely custom
    > drawn.
    >
    > The component will have a default look and will also be
    style-able and
    > skin-able. I will provide styles for users of the
    component to modify and
    > regarding skinning anyone can create a custom
    ProgrammaticSkin adding its
    > own
    > drawing logic and link it to the component via CSS with
    the ClassReference
    > applied to the skin selector.
    >
    > So far so good and it's clear what I want to achieve.
    Actually after
    > playing
    > with the weekend and today I know how to do most of the
    stuff but I have
    > one
    > single problem. So here is my question, where should I
    provide my custom
    > drawing logic? If I do it in the updateDisplayList
    inside the class
    > extending
    > UIComponent it works, however I thought that it would be
    a better practice
    > to
    > do it using programmatic skins, that way I could provide
    different skin
    > themes
    > for my component set.
    These aren't mutually exclusive. When you provide a skin with
    a
    TypeSelector, you have to add it to the display list
    somewhere, and this is
    typically done in updateDisplayList or addChildren. I prefer
    to do it in
    updateDisplayList, because you can then change it if the
    style changes.
    > The problem is that I can't make the programmatic work
    in this scenario. I
    > tried instantiating the custom programmatic skin during
    the
    > updateDisplayList
    > of the LiteButton component and adding it to my display
    object via
    > addChild but
    > that didn't do anything.
    Exactly what did you do?
    > I also tried creating a "default.css" stylesheet and
    > tried to use ClassReference as I would normally do to
    skin an already
    > existing
    > component (or composite component as well) but that
    didn't do anything
    > either.
    I've never had any problem using an approach similar to
    this...but I will
    say that I couldn't see any advantage in creating a
    default.css style sheet,
    since it's not really default in the way that the one that
    comes with Flex
    is. It's much more obvious to anyone using your component
    what's going on
    there if you create a style sheet where they're likely to
    spot it.
    > So how do I apply programmatic skins with the default
    look for custom
    > drawn
    > components?
    It seems like your approach is fine, but maybe you've made a
    mistake in your
    implementation.
    > I could do it inside the updateDisplayList of the
    LiteButton class
    > extending
    > UIComponent but again I would like to provide different
    theme sets for my
    > components so it makes sense using programmatic skins.
    You might want to consider also adding an instance of
    HaloBorder to your
    component. That brings a lot of functionality with it.
    HTH;
    Amy

  • How do you apply the same password policy to every PDF document you create with inDesign?

    All,
    Adobe peeps!,
    I don't know if this is really supported with inDesign 5.5, but here is my my use case:
    I constantly create more than 10 PDFs a day using inDesign
    On  all PDF's I create, i want to apply password security to protect them
    But in order to do so, within inDesign, I am   always forced to go to the "security dialogue" pane to set up the same permission  and passwords over and over again
    This gets tiring :/
    So what I am hoping to do is  the following:
    Like acrobat, I want to create a password policy within inDesign
    I want all PDFs created to have such a password policy  be automatically applied
    I know acrobat supports something like this (http://help.adobe.com/en_US/acrobat/pro/using/WS58a04a822e3e50102bd615109794195ff-7d68.w.h tml), but, unless I may have missed something, the Acrobat feature is limited. That is, the help link  does not tell me how to automatically do this with Acrobat either (the link does not explain to me how to "automatically apply the same password security policy to every PDF document I save within the application). I think the only way to do so is via "Adobe LiveCycle Rights Management ES", but for non server users, I am hoping there is another way.
    So my questions are:
    Is it possible to create password security policies in inDesign?
    Is it possible to apply the same password security policy to every PDF i create in inDesign?
    If not, can I change default settings within Acrobat ProX to automatically apply a password security policy everytime I save a PDF?
    If all fails, do you guys know of any extensions that can support this?
    Any help would be great. Thanks!

    Steve,
    Thanks for your notes. To follow up on your response.
    Bummer. I kinda had a hunch at this inDesign limitation.
    I have been aware of the method for setting up of a security policy within Acrobat. While this feature does cut down some of the work involved in creating and applying password policies to pdfs, what I am looking for with Acrobat is to apply the same password policy to every document I save from the app. Automatically. Without having to manualy select a policy.
    I think my solution will have to lie in me creating some sort of script to help support this need. I don't think Acrobat Pro X has the capabilities to allow me to tinker with, say, creating a save PDF preset that will allow me to automatically apply a password policy.
    PS. I am using acrobat pro x.

  • How do you apply a master page to multiple documents at the same time?

    How do you apply a master page to multiple documents at the same time?

    Hi friends,
    Thank you for trying to help me out.
    Let me explain it a bit to remove the ambiguity.
    I have 10 documents nested under a book. Each of these documents have 'n' number of pages. I want to apply my custom made master page "First" to the first page of all these 10 documents in one go. The remaining pages of the documents have to be in default "Right" master page format. How will I do it?
    I tried selecting all the documents and importing the formats from another document with the custom made "First" master page. The master page format is getting imported but the first page of all the documents still remain with the default "Right" master page format.
    I think now my question is more clear...

  • How do I apply same adjustments to multiple photos at the same time?

    How do I apply same adjustments to multiple photos at the same time?

    You can't but you can copy the adjustments made on one photo and apply/paste it onto another by:
    1 - Control (right)-clicking one the edited photo in the Edit mode and selecting Copy Adjustsments
    2 - Control-clicking on the next photo and selecting Paste Adjustments.
    OT

  • How can I apply my CS Photoshop membership to a second computer?

    how can I apply my CS Photoshop membership to a second computer?

    Thank You!
    I felt like I was wandering through mazes to get that question to the right
    venue.
    Thanks again,
    Gayatri

  • How do I apply a fade to the end of an audio track?

    I'm using Captivate 7, and have added one of the Gallery sounds to a slide in my software simulation. I want the track to fade at the end of slide, so I guess I need to apply an effect. All the help refers to "clicking the triangle next to the audio track name" to expand the track for editing, then goes on to talk about keyframes. I don't see a triangle next to the track name, or next to anything related to the track. I am in the Effects workspace. Also, on the EFFECTS tab, all the selections are grayed out.
    I also tried adding a fade by using the settings on the PROPERTIES tab, but it doesn't affect the playback.
    How do I apply a fade effect?

    Effects have no relation whatsoever with audio clips, I don't understand why you were looking there.
    You can edit audio, and to get into the editor there are several ways. If this is slide audio, the clip is visible on the timeline and right-click menu has an option Edit. Another way is to find the clip in the Library, and the right-click menu on its name has more options, not only Edit in Captivate, but you can also use another application which I would recommend. The audio editor in Captivate is pretty limited, I'm using Audition, but Audacity is free to use.
    For an easy way to have a fade out (you can time it, not the way of fading like in a real audio editor), you don't even need the audio editor in Captivate. Look in the Properties panel, part Audio and you'll have Fade in and Fade out.

  • I need to know how to edit a drawing - basically remove the arrows and text but at the same time match the background of the existing pic. then re add new text. how do i erase the arrows and text and arrows but match current background of pic. step by ste

    i need to know how to edit a drawing - basically remove the arrows and text but at the same time match the background of the existing pic. then re add new text. how do i erase the arrows and text and arrows but match current background of pic. step by step explanation please beginner

    Please post (a relevant section of) it right on this Forum.

  • How can I apply text position attributes (e.g. lower third) to more than one title at a time?

    How can I apply text position attributes (e.g. lower third) to more than one title at a time?

    jhb3243
    What version of Premiere Elements are you using and on what computer operating system is it running?
    In the case of this theoretical lower third to be applied to more than one title at a time
    a. Is there text in the lower third besides a graphic of some kind?
    b. Are all the titles to which this lower third is to be applied all together on the Timeline or scattered?
    If no text in lower third and titles all together, then, with text titles on Video 1 and lower third on Video 2, drag out the lower third to cover the length of the text titles on Video 1.
    I do not find "lower third" title files to be in the same category as certain effects where the Copy and "Paste Attributes" or "Paste Effects and Adjustments" lend themselves so well.
    Let us see what others have to say about all this. I will continue to experiment with what you seek and how you would prefer to get there. I am not optimistic but I will try.
    Thanks.
    ATR

  • How do I apply a skin to a Captivate project?

    I have created a skin in the skin editor. How do I apply it to an existing project? How do I apply it to a new project? I have searched the online help for instructions and I can't find them, if they exist.
    TIA.

    Hi there
    I just uploaded a small video to Jing. See if it helps you resolve the issue.
    Click here to view
    Cheers... Rick
    Helpful and Handy Links
    Captivate Wish Form/Bug Reporting Form
    Adobe Certified Captivate Training
    SorcerStone Blog
    Captivate eBooks

Maybe you are looking for