LightBox gallery not working

i am trying to make a lightbox gallery . when i click first image , it show the content normal, even i close and opne , it work fine. when i come to image two , if i click it , it show me the lightbox for the first image.
can any one help me please http://jsfiddle.net/wwavyh0y/2/

Use jQuery Fancybox2.  Simply copy & paste this code into a new, blank document. 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--LATEST JQUERY CORE LIBRARY-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--FANCYBOX plugins-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
body {
    background: silver;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#wrapper {
    width: 90%;
    margin: 0 auto;
    background: #FFF;
    overflow: hidden;
/**left sidebar**/
aside {
    float: left;
    width: 25%;
    border-right: 1px dotted #999;
    min-height: 400px;
    padding: 2%
/**this styles image container**/
#thumbs {
    float: left;
    width: 75%;
#thumbs li {
    list-style: none;
    float: left;
    width: 160px;
    margin: 10px 1% 0 1%; /**space between containers**/
/**use same size images**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: ".";
    clear: left;
    font-size: 0px;
    line-height: 0;
    display: block;
    visibility: hidden;
</style>
</head>
<body>
<div id="wrapper">
<aside> Left Sidebar </aside>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Image Viewer</h1>
<!--insert thumbnails with links to full size images below-->
<ul id="thumbs">
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
</ul>
<!--end thumbs-->
</div>
<!--end wrapper-->
<!--FancyBox function code-->
<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
</script>
</body>
</html>
Nancy O.

Similar Messages

  • Lightbox Gallery not working properly

    I put a lightbox gallery on my site for pictures and everything I'm getting on my test site is blank boxes with a red "x". One of the pictures showed up for some reason, but I didn't get the background color #1a2158 in the gallery background like I should have. It is just a gray background. Here is the link.
    http://test.netfc.com/hurricane_ike.html
    I have the gallery on some other pages too, so if anyone knows how to get my pictures to show up and the correct background color please let me know!!! Thanks!!

    All your links to pictures start with public_html/
    Remove it from the path

  • Lightbox gallery not working right...

    I inserted a lightbox gallery from the adobe exchange website. For some reason when you click on the thumbnail it doesn't open as it should. Can anyone see what the problem is?
    What it should look like: http://www.tecnorama.org/demos/lightbox.html
    What mine looks like: http://www.hopelightworship.com/photos.html
    Thanks...

    I see that you fixed your lightbox problem
    How did you fix it?

  • Why my adobe lightbox gallery widget works well on "live view" and not well in the browsers?

    Hi I need help with adobe lightbox gallery.I am building a website using dreamweaver cs5.
    My problem is that the gallery works perfect in "live view" but when I check it in the browsers the pictures do not show at all.
    What am I doing wrong .Please help.
    Thank you

    Hi All:
    From my experience with other people having problems with the widget, here are some things you can check when it doesn't work:
    Names with uppercase characters: Some servers don't see a difference between "images" and "Images" but most of them do: Check that the paths to the folders and files are correctly written. I encourage people to use always lowercase characters. Same applies to spaces (I prefer to use an underscore instead)
    "scripts" folder: I've also found that some servers don't allow a folder called "scripts". You should change both the folder name and the paths in the main document.
    Paths: This is the most common one: Make sure that the paths to the required files are correct. In theory, you shouldn't find this when the document is at the site root. If the document is inside a folder, sometimes files' location and related paths may vary. If you are using CS5 or above, a good trick is using the related files toolbar and check whether DW can find and open the files.
    Upload all the required files: Some users forget to upload the "lightbox" folder, located inside "images". That folder contains the images used by the lightbox to work (nav and close buttons, for example). And also check that the paths to those images is correct. In this case, you can edit the paths in the parameters that you will find in the script code added to the document (names are quite self explanatory and every param is commented, so this shouldn't be a problem)
    I hope this helps.

  • Links and photo gallery not working!

    Hi,
    I've just created a website by iWeb. After publishing the site in the local folder I've uploaded the entire contents to the server by FTP. From local folder it works fine but while trying to view online, the links between the pages not working (even not visible) at the same time my photo gallery is also not working (not visible). I was using Safari in mac.The same problem occurs while I am trying to browse the site from in my pc (copied the file in a local folder) and using Google Chrome and Internet Explorer
    If anyone can tell me what is the possible error?
    Thanks,
    Tarique

    From viewing your site it's apparent that not all of the files are being uploaded to the server. Particularly those in the Scripts folder.
    Have you opened your locally published site with your browser and checked it out? I think you'll find that the navbar will display correctly on both pages and the rest of the site will properly.
    What ftp client are you using to upload the files? If you haven't tried the free Cyberduck client give it a try. Many users have found it to be successful where other clients were having problems.

  • Please someone help!  Lightbox widget not working...

    I was trying to get the Lightbox widget to work on my webpage. I could not get the images to upload in the expandable box like they should. Instead of expanding out like the animated way they should, my Lighbox links kept opening in a new page and causing me to click the back button to see another image in the lightbox. I thought by deleting the lightbox widget and getting a fresh one might help but it seems to made things a lot worse. I was warned by a message that said "by deleting these settings you will not be able to get them back" and I deleted anyway thinking it was fixable. Now I can't fix it. There has to be a way for me to get the lightbox settings back into dreamweaver! Help Please!!!!!

    i had the same problem, and then i noticed when in design view view, the web page that contained the lightbox on it was trying to use 5 or 6 other files, like lightbox.js and some other files. i noticed when i clicked on the little files at the top on same bar as Source Code, it gave me an error saying the file is not on my local drive and gave me the option to "get", but when i clicked on "get" nothing happened. I'm assuming you might need those extra files for lightbox to work right?
    I don't know currently, and so i tried to "sign" into my widget browser, and i keep getting a timeout error. There's nothing wrong with my internet, so I don't know whats wrong with it.

  • Got my website up and running but lightbox is not working properly

    Hi Everyone,
    I got my website up and running, but my lightbox isn't working properly. The descriptions of each painting is missing and the arrows and slideshow function is missing. I don't know what I did wrong.
    The link to the website is below.
    http://www.sainteustacefineart.com/Gallery%202.html
    The gallery is supposed to look and function like the gallery in the website linked below.
    http://www.labelsnlogos.com/
    I also did this website, so I'm at a loss as to what went wrong.
    Thanks!
    Ellen

    Okay, I got it working. I forgot to "put" the JS folder (which holds the Clearbox components). Something I overlooked because it was on the bottom of the files window and I didn't see it.

  • MobileMe Gallery not working in iWeb

    Trying to create a iWeb page and wanna use mobileme gallery widget but the widget does not work. It tells me to add gallery and movies to the widget and thats already done. What do I do???

    I pasted the video from vimeo in a hotmail snippet.
    Do I still need to paste this in another hotmail snippet on the same blog page? How do you know what number to replace in 123456?
    <script src="http://gallery.mac.com/g/flash/photowidget_iefix.js" type="text/javascript" charset="utf-8"></script>
    <script language="JavaScript" type="text/javascript">
    writeObj("http://gallery.me.com/MobileMeName/123456", 226, 199);
    </script>

  • Tell a friend MobileMe gallery not working in Aperture 3

    I am trying to share my gallery photos - tell a friend is not working this week - it has worked fine for the past 3 years - what's up?

    Steve,
    is that the same for all your galleries, or only one particular gallery?
    Do your galleries sync o.k. with Mobile Me? Do you see the sync sign below?
    Try, if you can "Tell a friend" from the "Web Interface" - click the MobileMe button and select "Visit ...", from your gallery it is also possible to invite people to view. If that also does not work, something probably is wrong with your Mobile Me settings in the System Preferences.
    If the web interface works, but not the Aperture interface,check the Aperture Preferences -> Web.
    It should show your account as enabled.
    Regards
    Léonie

  • Lightbox portfolio not working in IE

    I downloaded a website template and it looks great. The only issue is that the portfolio light box is not working properly. When you click on a picture it loads up in the screen and the background fades to black. In IE the image loads up and the buttons to move to the next image and to escape disappear. the only way to get out of this mode is to hit F5. What can I do to get the light box to work properly  . http://www.adxgraphicstudios.com/adx/web-portfolio/index.html

    The buttons don't show in Firefox here either.
    Check to make sure any images referenced in your lightbox .css and .js have been uploaded and uploaded to the right location.
    That's usually the problem in this kind of situation.
    Other things to look at would be the case structure of the image names. Your OS will see a link to Image.jpg and send you to image.jpg without issue, servers view those as two separate files.

  • WordPress in Gallery not working today

    I have used the Wordpress gallery item previously and it worked great. Today, I need to create a new WordPress site and the Gallery is not working. The site comes up blank. I never get to the setup screen.
    Please let us know when the gallery is fixed.
    thanks, Amy

    Hello Amy Babinchak
    1.Are you able to create an empty site?
    2.Are you able to create a gallery site using a different template? e.g. try an "ASP.NET Empty Site".
    I have just tried to create the Wordpress Webapp from the Classic Portal and find that I am able to create the it (does not load blank to me), we can be sure that there aren't any issues currently with creating webapp using these templates.
    You can also try to create the Webapp from the New portal and let us know the result:
    1. Connect to the new portal (https://portal.azure.com) with the Subscription ID where you created the web site originally.
    2. Create a Webapp with the exact name that you are trying to create.
    Please let me know the results when you try this.
    Thanks,
    Syed Irfan Hussain

  • Photo Gallery Lightbox Navigation not working

    Hi,
    The previous, next, and close buttons don't seem to be working for some of the photos on this page: http://vanessastone.namastecms.com/media/photos/community for the photo gallery lightbox.  The issue only appears to be happening in Chrome and Safari.  Firefox is working fine.  I looked around in Chrome's Developer tools but didn't find any hints as to why that might be happening.  Any help is greatly appreciated!
    Thanks,
    Jeff

    Sorry InteractiveGuru, it looks like I posted on the wrong thread. The reason the buttons aren't working is because of your CSS regarding your left, right and close buttons are not suitable. You'll want to either revisit your CSS, or revisit how the buttons are formatted (e.g the three <a>'s).

  • IWeb photo gallery not working!

    Hello everyone! I built my website using iWeb and it has been up and running perfectly for a few months now. But, then I decided to try and update it with photos of artwork. I uploaded all files to my web-host's server, and now the page shows, but not the photo gallery! Any ideas as to what happened? Here is the site & page. My web hosting company is looking at it, but they have yet to discover what the issue is.. Any advice you can provide is most appreciated!
    http://thelonebeader.com/ 
    http://thelonebeader.com/Places_portraits/Places_portraits.html

    You are missing a number of files from your website.  You can see which are missing by bringing up the Activity window (Command+Option+A) while viewing the Places page in Safari and looking at the list of files in the window.
    How are you publishing the site?  With iWeb?  If so then try using the File ➙ Publish Entire Site menu option to see if that will force those missing files to be uploaded. 
    If that doesn't work you can publish your site to a folder on your hard drive and use a 3rd party FTP client, like the free  Cyberduck, to upload the site files. If you have to continue to use Cyberduck this tutorial may help: #2 - Uploading Only Those Newly Published or Edited Files When Using a 3rd Party FTP Client.
    OT

  • Web gallery not working in firefox

    I have made a web gallery using bridge cs4. It works and looks great in internet explorer, however, it is not displaying correclty in Firefox. Can anyone help?
    the site is www.sheyashapkido.com/photos/visit/index.php
    Thank you.

    What do you mean by not displaying properly?
    I checked it on my computer in Firefox and it looks good.

  • Flash Web Gallery not working in Firefox

    I am having problems getting the following site working in Firefox, although it works fine in IE.
    http://www.starmooseglamour.net
    I initially had the \bin\images\ issue so I implemented Sean's suggested fixes:
    http://forums.adobe.com/message/1391286#1391286
    http://forums.adobe.com/message/1947131#1947131
    The folder structure is now as it should be and both HTML and Flash versions work off-line and in IE, but in Firefox the site hangs at the Loading Images stage. I have done a thorough search of this and other forums but can't find a solution.
    Many thanks,
    Adrian

    Hi again,
    Adrian, I am not sure if this is your situation, but I think my issue is with the folder structure of my web hosting account, though why it works in IE but not FF is still a mystery.
    I focused only on the SimpleViewer gallery, as it didn't use the "bin" folder in its structure, as the default flash gallery does. Adrian, I wasn't sure from reading your post, but were you able to modify your default flash gallery engine to not use the bin structure?? If so, could you let me know, please? I can give it a try.
    I uploaded to my redlineart.com redlineart.com/fltestsimple1 account, a Shaw account http://members.shaw.ca/kgamadia/fltestsimple1/, and exported locally to my hard drive to manually upload.
    All sets had the same folder structure. When run in Firefox from everywhere, the only failure occurred on redlineart.com. My web log files show a 403 error when accessing the images (for the gallery). However, when I right click on the image and elect to open in a new window, it works. Permissions on the folder are standard 755.
    The difference is that redlineart.com/fltestsimple1 translates to http://titan.arandomserver.com/MyAccountID/fltestsimple1/, but LR uploads to <home>/public_html/fltestsimple1. So the paths that the flash gallery engine is using is what I think is the issue. Internet explorer, loads redlineart.com/fltestsimple1 just fine, but fails to access it via http://titan.arandomserver.com/MyAccountID/fltestsimple1/. The HTML galleries work across the board, so for now I'll stick with them.
    I hope this was clear enough. If there are any suggestions, I am able to try things out. Thanks in advance.
    Kai
    Sample galleries:
    http://redlineart.com/fltestsimple1/
    http://members.shaw.ca/kgamadia/fltestsimple1/

Maybe you are looking for

  • Cancellation of Credit Memo

    Hi, The user has raised an incorrect Credit Memo in the system but the accounting document is not cleared yet. How can I reverse the process?

  • I downloaded the upgrade last week and it is still saying I need to download it

    Why is it saying I need to download the upgrade when I downloaded it last week?

  • AE CS3 install failing

    I'm using the deployment method of installing After Effects CS3 on multiple Macs.  Copy the install files to the machines using ARD, then initiate the install via ARD with a unix command to run the installer in silent mode.  This install method works

  • Regarding LS type in SLD

    Hi, When I create business systems with the same LS it complains that LS has been used into another BS , how to handle it??!! Can anybody help me for the same Cheers., Abhi

  • Mass upload in KM maintaining the up-to-date versions of documents

    Hello guys, I need to do the Mass Upload in Repository Manager (persistence mode DB) in KM. My documents are stored in a file system, where they have versioning control. I need to upload the documents in portal with the up-to-date version. I have act