Forums

xao

In chris`s dynamic page.. i have a section of portfolio, here is my unfinished website www.xaodesigns.tk,
but in the content aria I cannot activate a Jquery script at all :( I tried many scripts but non did the job!
I have all the files in place: css`s, js`s...all of them are exactly where they had to be but if you see nothing it will happen when u click the img from folio section!
Here is the code of my folio.html with :

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    
    <title>Xao Designs | Folio</title>
    <link rel='stylesheet' type='text/css' href='css/style.css' />
    <meta http-equiv="imagetoolbar" content="no" />
    
    
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script&gt;
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    <script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='js/jquery.easing.compatibility.js'></script>
    <script type='text/javascript' src='js/dynamicpage.js'></script>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script&gt;
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
    <script type="text/javascript">
        $(document).ready(function() {
            /*
            *   Examples - images
            */

            $("a#example1").fancybox({
                'titleShow'        : false
            });

            $("a#example2").fancybox({
                'titleShow'        : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'elastic'
            });

            $("a#example3").fancybox({
                'titleShow'        : false,
                'transitionIn'    : 'none',
                'transitionOut'    : 'none'
            });

            $("a#example4").fancybox();

            $("a#example5").fancybox({
                'titlePosition'    : 'inside'
            });

            $("a#example6").fancybox({
                'titlePosition'    : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'titlePosition'     : 'over',
                'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'        : 'inside',
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

            $("#various4").fancybox({
                'padding'            : 0,
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });
        });
    </script>

</head>

<body>

    <div id="page-wrap">
    <header>    
          <nav>
              <ul class="group">
                  <li><a href="index.php"></a></li>
                  <li><a href="about.html"></a></li>
                  <li><a href="contact.html"></a></li>
              </ul>
          </nav>
        </header>    
        <section id="main-content">
        <div id="guts">
        
     <p id="img" style="height:auto">
        Different animations - 'fade', 'elastic' and 'none'<br />

        <a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>

        <a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>

        <a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>
        
    </p>
     

        </div>
        </section>
        <footer>
          &copy;2010 Xao Designs
        </footer>
            
    </div>
    
</body>
</html>

xao

every content that goes in "guts" does not work, and if I try to put the script and html code below guts, it will not appear, do you have any solutions?

Chris Enloe

Try using double quotes on the first section of the javascript links. I see you've used double with the second half, just be consistent. Try that and see what happens.

xao

nothing happened! :( , the js does not ignite the photos into a nice slide :(

virtual

I could not get your site to load. In the meantime, did you change any of the names in the html?

Olo

Why do you load Jquery twice?

xao

virtual : no, my computer was off, srry
Olo: I have it ones now.

xao

I shutdown the dynamicpage.js and the gallery animation is working if I start the dynamicpage again ..the gallery will not work

kashife

@xao
Have you got the solution yet? I am having the same problem. I am using an accordion menu plugin and it is conflicting with dynamic page. Only one of them works at a time.

chrisburton

@kashife
paste your header.

<!Doctype html>
<meta charset="utf-8">
...
</head>

domestika

i too am having similar issues.

i am using the awesome dynamicpage feature from chris. all of the pages being pulled to my index.html are thumbnail galleries which i want to launch fancybox with.

i am able to view my slideshow directly on my page [as below]

http://mother-heroic.com/test/hamilton/celebrity.html

but when i try to view through the index.html page, fancybox fails to trigger and i am taken directly to the image.

http://mother-heroic.com/test/hamilton/index.html#celebrity.html

i am not sure what i am doing wrong. does fancybox and the dynamicpage scripts not play well together. or should i only be calling the scripts on one or the other? i've tried various versions with no success.

any ideas?

treehouse : what would you like to learn today?

Forums

I don't know why! ! please help