How to make thumbnails enlarge when the effects of navigation using grid with jquery

I used an effect of navigation grid with jquery to display several thumbnails but I would like to than images to enlarge to a larger size when they are clicked on, I don't want another window to open it, but the image should appear on the same page as the album, except that I don't need to a gallery, just the function is expanded. Please see code below my page and the link to see the demonstration of the net asset value of grid with jquery that I used (effect-"lines move", example 9).

http://tympanus.NET/Codrops/2011/06/09/grid-navigation-effects/comment-page-2/#comments

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

" < html xmlns =" http://www.w3.org/1999/xhtml ">

< head >

< meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"

< title > my < /title > Gallery

< link href = "stylesheet.css" rel = "stylesheet" type = "text/css" / > "

< link href = "gridNavigation.css" rel = "stylesheet" type = "text/css" / > "

< link href = "reset.css" rel = "stylesheet" type = "text/css" / > "

< style type = "text/css" >

{body

background-color: #000000;

}

a: link {}

text-decoration: none;

color: #f1d379;

}

a: visited {}

text-decoration: none;

color: #f1d379;

}

a: hover {}

text-decoration: none;

color: #9d6f1b;

}

a: active {}

text-decoration: none;

color: #f1d379;

}

< / style >

"< script type =" text/javascript"src="scripts/jquery-1.6.1.min.js "> < / script >

"< script type =" text/javascript"src="scripts/jquery.easing.1.3.js "> < / script >

"< script type =" text/javascript"src="scripts/jquery.mousewheel.js "> < / script >

"< script type =" text/javascript"src="scripts/jquery.gridnav.js "> < / script >

< script type = "text/javascript" >

{$(function()}

$('#tj_container').gridnav ({}

type: {}

lines: 2.

mode                    : 'rows',                               // use def | fade | seqfade | UpDown | sequpdown | showHide | Scatters | lines

Speed: 1000, / / for fade, updown, sequpdown, seqfade, showhide, disperse, lines

easing: "easeInOutBack", / / for fade, updown, sequpdown, seqfade, showhide, disperse, lines

factor: 150, / / seqfade, sequpdown, lines

reverse: "/ / for sequpdown

}

});

});

< /script >

< / head >

< body >

< div class = 'container' id = "container" >

< div id = "navbar_gallery" class = "#navbar_gallery" >

< ul >

< li > < a href = "index.html" > homepage < /a > < /li > ""

< li > < a href = "about_me.html" > about me < /a > < /li > ""

< li > < a href = "gallery.html" > Gallery < /a > < /li > ""

< li > < a href = "contact.html" > Contact < /a > < /li > ""

< /ul >

< / div >

< div class = "maintext" id = "page_maintext" >

< class p = "page_heading" > my < /p > Gallery

< / div >

< div class = "content Exemple5" >

< div id = "tj_container" class = "tj_container" >

< div class = "tj_nav" >

< span id = "tj_prev" class = "tj_prev" > </span > previous

< span id = "tj_next" class = "tj_next" > next </span >

< / div >

< div class = "tj_wrapper" >

< ul class = "tj_gallery" >

< li > < a href = "#" > < img src = "images/1.jpg" alt = "image01" / > < / has > < /li > "

< li > < a href = "#" > < img src = "images/2.jpg" alt = "image02" / > < / has > < /li > "

< li > < a href = "#" > < img src = "images/3.jpg" alt = "image03" / > < / has > < /li > "

< li > < a href = "#" > < img src = "images/4.jpg" alt = "image04" / > < / has > < /li > "

< li > < a href = "#" > < img src = "images/5.jpg" alt = "image05" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/6.jpg" alt = "image06" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/7.jpg" alt = "image07" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/8.jpg" alt = "image08" / > < / has > < /li > "

< li > < a href = "#" > < img src = "images/9.jpg" alt = "image09" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/10.jpg" alt = "image10" / > < / has > < /li > "

< li > < a href = "#" > < img src = "images/11.jpg" alt = "image11" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/12.jpg' alt = 'image12' / > < / a > < /li >"

< li > < a href = "#" > < img src = "images/13.jpg" alt = "image13" / > < / has > < /li > "

< li > < a href = "#" > < img src = "images/14.jpg" alt = "image14" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/15.jpg" alt = "image15" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/16.jpg" alt = "image16" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/17.jpg" alt = "image17" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/18.jpg" alt = "image18" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/19.jpg" alt = "image19" / > < / a > < /li > "

< li > < a href = "#" > < img src = "images/20.jpg" alt = "image20" / > < / a > < /li > "

< /ul >

< / div >

< / div >

< / div >

< / body >

< / html >

Remove the first slash in front of the call to the jquery and style sheet:

Tags: Dreamweaver

Similar Questions

  • How to make text disappear when the mouse is over a button?

    Hello, I'm completely new to Flash, and well I need help. I created a page that contains static text in the Center.

    Page has buttons on the side and when I rollover a button text is displayed, but the problem is that when I rollover a button, static text in the Center is here and I want to hide as I can't read anything either because the texts are overlapping.

    How can I make the text in the centre disappear / hide when I rollover a button and how do I make it reappear when the mouse is the off button?

    I hope what I said makes sense.

    You can assign the code onRollOver and onRollOut buttons to the dispappear of text, but you will need make the text a movieclip with instance name that you can use to target to make it invisible.  In the example below, the button has an instance name of "btn" and the movieclip of text has an instance name of "text_mc".

    btn.onRollOver = function() {}

    text_mc._visible = false;

    }

    btn.onRollOut = function() {}

    text_mc._visible = true;

    }

  • How to make an end, when the last piece is finished

    IM new to Flash

    Can someone tell me how to end a puzzle game where the final piece of the puzzle is to / collides with the last location, he'll then a scene from new movie with a different major and a text like "you win."  Here is the code of action drag drop with no end I did a scene 2 and im planning to go to the scene 2 (the one with txt and new background) once the puzzle is completed. I don't know how to code, I copied all of this online tutorial which is great, but not end. Also, scene 2 I want to put a BACK button where it goes back to the scene 1 (solve the puzzle thingy).  Im still new and have no history proggramming, any help is appreciated. Thankx.

    piece1_mc.addEventListener (MouseEvent.MOUSE_DOWN, dragStart1);
    function dragStart1(event:MouseEvent): void {}
    piece1_mc.StartDrag ();
    }

    piece1_mc.addEventListener (MouseEvent.MOUSE_UP, dragStop1);
    function dragStop1(event:MouseEvent): void {}
    piece1_mc.stopDrag ();
    If (piece1_mc.hitTestObject (holder1_mc) == true) {}
    piece1_mc.x = holder1_mc.x;
    piece1_mc.y = holder1_mc.y;
    }
    }

    piece2_mc.addEventListener (MouseEvent.MOUSE_DOWN, dragStart2);
    function dragStart2(event:MouseEvent): void {}
    piece2_mc.StartDrag ();
    }

    piece2_mc.addEventListener (MouseEvent.MOUSE_UP, dragStop2);
    function dragStop2(event:MouseEvent): void {}
    piece2_mc.stopDrag ();
    If (piece2_mc.hitTestObject (holder2_mc) == true) {}
    piece2_mc.x = holder2_mc.x;
    piece2_mc.y = holder2_mc.y;
    }
    }

    piece3_mc.addEventListener (MouseEvent.MOUSE_DOWN, dragStart3);
    function dragStart3(event:MouseEvent): void {}
    piece3_mc.StartDrag ();
    }

    piece3_mc.addEventListener (MouseEvent.MOUSE_UP, dragStop3);
    function dragStop3(event:MouseEvent): void {}
    piece3_mc.stopDrag ();
    If (piece3_mc.hitTestObject (holder3_mc) == true) {}
    piece3_mc.x = holder3_mc.x;
    piece3_mc.y = holder3_mc.y;
    }
    }
    piece4_mc.addEventListener (MouseEvent.MOUSE_DOWN, dragStart4);
    function dragStart4(event:MouseEvent): void {}
    piece4_mc.StartDrag ();
    }

    piece4_mc.addEventListener (MouseEvent.MOUSE_UP, dragStop4);
    function dragStop4(event:MouseEvent): void {}
    piece4_mc.stopDrag ();
    If (piece4_mc.hitTestObject (holder4_mc) == true) {}
    piece4_mc.x = holder4_mc.x;
    piece4_mc.y = holder4_mc.y;
    }
    }
    piece5_mc.addEventListener (MouseEvent.MOUSE_DOWN, dragStart5);
    function dragStart5(event:MouseEvent): void {}
    piece5_mc.StartDrag ();

    }

    piece5_mc.addEventListener (MouseEvent.MOUSE_UP, dragStop5);
    function dragStop5(event:MouseEvent): void {}
    piece5_mc.stopDrag ();
    {if (piece5_mc.hitTestObject (holder5_mc) == true)}
    piece5_mc.x = holder5_mc.x;
    piece5_mc.y = holder5_mc.y;
    }
    }
    piece6_mc.addEventListener (MouseEvent.MOUSE_DOWN, dragStart6);
    function dragStart6(event:MouseEvent): void {}
    piece6_mc.StartDrag ();
    }

    piece6_mc.addEventListener (MouseEvent.MOUSE_UP, dragStop6);
    function dragStop6(event:MouseEvent): void
    {
    piece6_mc.stopDrag ();
    {if (piece6_mc.hitTestObject (holder6_mc) == true)}
    piece6_mc.x = holder6_mc.x;
    piece6_mc.y = holder6_mc.y;
    }


    }

    In each section test you if there was a shot, when a stroke occurs, you must remove to prevent event listeners which allows the object to process again and then increments a counter so that you can check if all parts are recorded as having been abandoned... example...

    outside any other code, declare the variable

    var plantedCount:int = 0;

    then inside you event handler functions do something like the following:

    If (piece1_mc.hitTestObject (holder1_mc)) {}

    piece1_mc.x = holder1_mc.x;

    piece1_mc.y = holder1_mc.y;

    piece1_mc. RemoveEventListener (MouseEvent.MOUSE_DOWN, dragStart1);

    piece1_mc. RemoveEventListener (MouseEvent.MOUSE_UP, dragStop1);

    plantedCount += 1;

    if(plantedCount == 6) {}

    Stop (1, "scene2");

    }

    }

    Note: When the code is repeated in modes such as yours the fact usually indicates the code can be condensed by making it more generic in which the same functions are shared by all the parts rather than having sets of functions dedicated to each piece.

  • How to control automatic shutdown when the battery is discharged using Windows

    The laptop stops right in the Middle something without notice.

    Even after that I formatted the system, he still stops automatically when the battery is low, without advising me of either the low battery status or the judgment.

    I don't think that the cause of the problem is the power management because it is set to balanced.

    How can I control when the pc stops?

    Hello

    Usually, you can change these settings within the Windows power management.
    Using Win 7 or Win 8/8.1?

    Here is the Nice technical document about the features of Windows 7 power management
    http://APS2.toshiba-tro.de/KB0/HTD12017W0001R01.htm

    Check the last option called: battery.
    It provides many useful features such as low battery, critical battery level, low battery action or critical battery action

  • How to make a link on the Pop Down Navigation

    I want to make a link in my navigation bar that appears down when you move the mouse over it. Could someone help me? Or could one tell me what as its official name for a link as is.

    Thank you

    These can help:
    Like this:
    http://www.TJKDesign.com/articles/dropdown/demo.asp

    tutorial here:
    http://www.TJKDesign.com/articles/dropdown/default.asp

    --
    Nadia
    Adobe® Expert community: Dreamweaver
    -------------------------------------------------
    Tutorials | SEO | Templates
    http://www.DreamweaverResources.com
    -------------------------------------------------
    http://www.perrelink.com.au
    -------------------------------------------------
    Tutorials CSS for Dreamweaver
    http://www.Adobe.com/devnet/Dreamweaver/CSS.html
    -------------------------------------------------

    "Conan the charlatan" wrote in message
    News:ej913e$1Ne$1@forums. Macromedia.com...
    > Thanks for the help.
    > I'm looking to do a pop-up menu like those on this web site. When
    > you
    > pass the mouse on one of the links in the navigation bar to the top
    > top. (solutions,
    (> products, supported ect...)
    >
    > Thanks again.
    >

  • How to make an object follow the mouseX when clicked on

    How to make an object follow the mouseX if clicked? Help, please.

    You should think it through - your code does not match your very simple explanation of what you say, it should do so, and it should... click an element and follow the mouse.

    A game loop (ENTER_FRAME) could work, but in this case it wastes unnecessary treatment if the mouse does not move.  And in your code example, it does not expect the clicks.

    Use a MOUSE_MOVE instead of an ENTER_FRAME event listener.  Inside of the event by clicking on the handler function is where you must be defined the MOUSE_MOVE listener.  The MOUSE_MOVE listener Manager is where you assign rock1Cnt.x = mouseX.

    public void Main (): void {}

    rock1Cnt.addEventListener (MouseEvent.CLICK, mouseClickHandler);

    }

    private void mouseClickHandler(e:MouseEvent):void {}

    stage.addEventListener (Event.MOUSE_MOVE, followMouse);

    }

    private void followMouse(e:MouseEvent):void {}

    rock1Cnt.x = mouseX

    }

  • How to get an overview of the effects of the question slide?

    Captivate 5
    Win XPSP3


    Problem: how to have an overview of the effects (such as drop shadow) applied to the objects (jpg) on a question slide.

    Situation: Quiz to tell 5 random questions drawn from a pool of 50 questions multiple choice.


    Questions pool Panel:
    I'm building the Quizzing question slides workspace.
    I can view the slide and add questions and answers + jpg images that may be necessary.

    If I want to add a shadow to an image, I select the object (img) and place you in the effect controls panel.
    I add a drop shadow and can make adjustments, BUT the effect is not visible on the slide.


    The Live Preview button is grayed out and unavailable.


    Overview of the toolbar options are...
    F3 slide... Does not show the effect.
    F4 project... would take too long AND would be not safe to view the slide at which I had added the image effect.
    F12 browser... shows the entire project with 5 random questions but not necessarily the specific slide.

    Am I on the Filmstip Panel:
    There are several options preview...
    F8 this slide... If I select a blank Question slide at random, it shoots a question of the pool of 50, but not necessarily that I'm working on.
    F10 then 5 slides... same problem as F8

    Unacceptable workaround solution:
    I can create another pool 'test', containing one question.
    Copy slides edited to "test the pool and the preview with F8 or F10.
    A lot of extra work...

    Then the effect works and would weigh on the finished quiz... BUT... I can't (without a lot of P'ing on) Preview and adjust effects applied to a question slide.

    Someone at - it ideas?

    Concerning

    Frank

    If you want to test the effects on a particular slide of your pool of the Question, and you don't want to publish all slides to see it, just click with the right button on the slide in the question pool and select move Question to > the project main.

    Then, you will be able to preview the effects as with any other slide.  When you know that the slide is over, just get him back in the Question pool.

  • How to solve a problem when the windows setup program does not open a program, says I need to install it. and an error message 1706

    How to solve a problem when the windows setup program does not open a program, says I need installation cd and a 1706 error message happens.

    Hi PAtwoodwu,

    1. what program are you trying to install?

    2. did you of recent changes on the computer?

    3 does happen with all programs?

    Check and make sure that the Windows service install is running on the computer.

    (a) click on start to reduce this includes this image, click run , type services.msc , and then press enter to open Services.

    (b) right click on the Windows Installer service and then click Properties.

    (c) if the box Startup type is set to Disabled, change it to Manual.

    (d) click on OK to close the Properties window.

    (e) right click on the Windows Installer service and then click Start. The service should start without errors.

    (f) click on the file menu, and then click exit.

  • Selection of the layer not bound to cancel the story when the effect controls panel is open.

    Did anyone else noticed strange with the undo history behavior when the effect controls panel is opened?

    Try this:

    1. have the layers panel, the history and the visible effects at the same time.

    2. open an image

    3. duplicate the layer

    4 make a new empty layer

    5. take the Brush tool and paint two strokes on the new Virgin layer

    6 return the layer duplicated under the layer of white and two strokes of paint

    7. in the history panel, back in the States in history and look at the layers panel

    Untitled-2.jpg

    Now close the effect controls panel

    1. in the history panel, select the last State of history

    2 go back in the history States

    Noticed a difference?

    Photoshop elements 11 on a windows 8 bit x 64 system.

    Title of the message was edited by: Brett N

    I see the behavior, and I'll log a bug for her report. Very strange, but good catch what the effects Panel which is the source!

    27Prac, make sure that the effect controls panel is pointing upwards, it is essential. But I tested it on Windows and Mac and see on each.

  • How to validate an entry when the focus leaves the intensity absorbed in

    How to validate an entry when the focus leaves the intensity absorbed in a form?

    "Ansury" wrote in message
    News:garo90$L71$1@forums. Macromedia.com...
    > Not AFAIK. Event.Target has a reference to the object that sent the
    > event. In livedocs:
    >
    > "Every event object has a goal and a currentTarget property that help."
    > you
    > Hold where it is being spread. The target
    > property
    "> return to the sender of the event.
    "
    >
    > BUT...
    > Your if statement will never evaluate true because you compare one
    > UITextField to a TextInput. A UITextField (stored internally in a
    (> TextInput, it makes the text) actually dispatches the event.

    currentTarget gives you the object on which the event actually listener
    attached to...

  • If time machine is incremental how it removes previous versions when the disk is full, without breaking the chain, so do not be able to restore all changes since the first full file

    If time machine is incremental how it removes previous versions when the disk is full, without breaking the chain, so do not be able to restore the file with any changes made since the full backup first file...

    If the TM drive storage is full TM automatically deletes the version the oldest files for the new incremental backups can be made. Thus, in this case you cannot restore the versions that TM deleted because it takes more storage.

  • Can develop is no longer window of saved passwords which shrinks web address to make it unreadable when the "Show passwords" option is selected? e

    Hello
    After the last update that I can develop is more saved passwords window shrinking the web address to make it unreadable when the "Show passwords" option is selected? What passwords are shown the window compresses web addresses that leaves the www / / http and I can only be able to view a letter or a description of the site. Given the number of passwords you need and different requirements (i.e. 6.8, or 10 characters, high low case number of cases etc.), I quite often find that I want to display the entire page.
    Is there a way I can expand this window please? I know I could use a master password, but I always like to follow the real things...
    THX Jas

    Lower right corner is a "triangle of 6 points" which allows this window to drag more big. Once more this setting is after the closure of the tab "content" and even after that Firefox is closed and reopened.

  • How to make a folder shows the number of files in there?

    How to make a folder shows the number of files in there?

    You have not indicated what OS you are using.

    Yosemite

    Action > View Options: Select to display the item of information

  • I have updated and now when I try to log on to Web sites with fingerprint reader, I get "Firefox doesn't know how to open this address, because the Protocol (dpql) is not associated with any program."

    I have updated and now when I try to log on to Web sites with fingerprint reader, I get "Firefox doesn't know how to open this address, because the Protocol (dpql) is not associated with any program."

    What is the Digital Persona fingerprint scanner? If it's that they have abandoned, for more details, see https://support.mozilla.com/en-US/questions/799388

  • I'm trying to connect on Apple TV.  It keeps generating a 6-digit verification code, sent to another device.  I need a 4 digit or need to know how to make a space on the verification code entry screen

    I'm trying to connect on Apple TV.  It keeps generating a 6-digit verification code, sent to another device.  I need a 4 digit or need to know how to make a space on the verification code entry screen

    Read this noting the last two paragraphs:

    For Apple ID - Apple Support two-factor authentication

    You can try to add on your suggested such password or disable the service and then connect.

Maybe you are looking for

  • Ridiculous display

    I own a Mac BookPro RD 2015 (after April) with 128 GB of storage. It works very well, but can explain how below the display of storage it ridiculously shows 156,53 GB of Apps and 35 / GB free out of 120,11 GB?

  • How can I remove the default buttons on the personal bar?

    I hate the 'latest news' and icons "Getting Started" and "most popular." I want to replace it with bookmarks of my choice. I tried to use the custom option, but it didn't work. Y at - it an option to choose a site of different information for the 'la

  • C855-13D satellite after 5 minutes, my screen becomes dim

    Can someone help me please?I use a laptop Toshiba Satellite C855-13D with 64-bit Windows 7. After 5 minutes, my screen becomes dim unless I move the mouse.In order to disable this I need to go into the Advanced mode in eco service department. But on

  • Office 2016: Office365ServiceV2 error

    Yesterday I spent 5 hours on the 'the Office365ServiceV2 found a problem and must be closed' - error on my new MacBook Pro with El Capitan. The error occurs when you have opened/used Word, Excel or Powerpoint, and then close your Mac. Before I finish

  • acquisition of data and put it in a table in regular order

    Hello, experts OR I would like to get some tips on how to put the data in a table in a regular sequence in FPGA In FPGA, analog data of the sensor data. 1 data => allocate on index 1 2 data => allocate on index 2 ... I have given th => return to inde