dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Fancybox "Popup" Problem

  1. #1
    Join Date
    Feb 2007
    Posts
    135

    Question Fancybox "Popup" Problem

    Hi there

    I have a site that I am working on and I cannot get the fancybox gallery to work. I have a feeling it is something to do with not accessing images. I have tried to change url paths and that has not seemed to work.

    There is the current site (which has the same code and same gallery and it works) and a duplicate site that I am now working on with changes.
    I don't want to reference the URL's here as i don't want their site to be indexed on Google... so i have attached the 2 links in a Word doc.
    I would appreciate any help and I hope I have put this in the correct section.

    Thank you, Leigh
    Attached Files Attached Files

  2. #2
    Join Date
    Jul 2013
    Posts
    66
    Providing your data like this is a barrier to people helping you. First of all, it's unnecessary effort for us to download and unzip your files just to open a word document and then open a link where we need to look at the source code. Secondly, I am not going to download a zip file that I don't trust.

    If you don't want to provide the links directly - which, of course, you have every right to –, you might want to either post the code or, even better, a working example with the minimum code required to demonstrate the problem.

  3. #3
    Join Date
    Feb 2007
    Posts
    135
    Hi there, yes sorry!
    I usually always post the links on here, but with this client i didn't want to. There are also so many files involved that i am really not sure what code to paste here to show you. i also created the zip file as it woulnt allow me to upload a word doc. i will try upload a notepad file.

    BUT... also this is the page's code that is not working: hope this will help.

    <meta name="Description" content="" />
    <meta name="Keywords" content="" />


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

    <script type="text/javascript" src="javascript/jquery-1.3.js"></script>
    <script type="text/javascript" src="javascript/jquery.cycle.all.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
    $('#myslides').cycle({
    fx: 'fade',
    speed: 5000,
    timeout: 2000
    });
    });
    </script>

    <link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
    <link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
    <link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

    <script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">

    /***********************************************
    * All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    </script>


    <script type="text/javascript" src="javascript/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="javascript/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="css/fancybox-1.3.4.css" media="screen" />
    <script src='javascript/magicLine.js'></script>



    <script type="text/javascript">
    $(document).ready(function() {
    $(document).ready(function() {
    $("a[rel=example_group]").fancybox({
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'titlePosition' : 'outside',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    return '<span>Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
    });
    });
    $("a[rel=popups], a[rel=popups2]").fancybox({
    'titlePosition' : 'over',
    'transitionIn' : 'elastic',
    'transitionOut' : 'fade'
    });
    });
    </script>

    </head>


    ----- in body:

    <div class="gallery">
    <a rel="example_group" href="images/jhb/1.jpg"><img alt="" src="images/jhb/1_sml.jpg" /></a>
    <a rel="example_group" href="images/jhb/2.jpg"><img alt="" src="images/jhb/2_sml.jpg" /></a>
    etc....

  4. #4
    Join Date
    Feb 2007
    Posts
    135
    Attached the notepad file with the links
    Attached Files Attached Files

  5. #5
    Join Date
    Jul 2013
    Posts
    66
    Thanks, that's more helpful. One more thing: Please format code that you post as such so that intendation won't be lost.

    My first question, since you have a working version, would be: what did you change? A good way to solve these problems is to undo one step after another and see when it starts working again. This will give you the cause of the problem in many cases (pro tip: a version control system like git makes this super-easy).
    In particular, I noticed that you added a new plugin (jQuery cycle). This always sets off alarm glocks and you might want to check compatibility of cycle and fancybox. In fact, a quick google search shows that they have problems working together, so especially removing the cycle plugin to see if it changes anything is worth a shot.

    Second, it's always a good idea to look at what your browser's console tells you. In Google Chrome, just hit Ctrl+Shift+J to open it (other browsers have one too). The working version doesn't say anything, but the broken page has an error in magicLine.js. I doubt, though, that this has anything to do with your problem. I think it's the reason your navigation animation isn't working right, though.

    Another thing to note is that you are using jQuery 1.3 – a version, that was published in January 2009. This is more than an entire major release old! Unless you know about good reasons for this, I would strongly recommend updating to a more current version. In fact, that would be the very first thing I'd try.

  6. #6
    Join Date
    Feb 2007
    Posts
    135
    Hi there, thanks.
    I have actually tried this now, and no go. It seems that its not seeing the fancybox images. and i dont know why, as the urls from the existing site to this site really match, they should just work.
    I also have not intended to use that elastic script so I have removed that now. i also took away other scripts for the nav that I added and tested it and it still doesnt work. very strange.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles