Ask questions and get good answers on mb.jQuery.components

Question

I am trying to put a jquery slideshow into the extra content div in the mb.imagenavigator. I've tried combining the two scripts and placing them both into the same html file, but it doesn't seem to be working for me.

I'm trying to put this: http://galleria.aino.se/ gallery into the mb.imagenavigator.

I'm pretty sure that the problem is that both scripts are calling two different jquery source files, but I can't seem to figure it out how to change that.

here is the HTML file, connecting to all the source files.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>imageNavigator</title>
    <link href="mbImgNav.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="css/galleriffic-5.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript" src="inc/jquery.metadata.js"></script>
    <script type="text/javascript" src="inc/ui.core.min.js"></script>
    <script type="text/javascript" src="inc/ui.draggable.min.js"></script>
    <script type="text/javascript" src="inc/mbImgNav.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="../src/galleria.js"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->
        <script src="galleria/src/galleria.js"></script>

    <style type="text/css">

        body {
            margin:20px;
        }
        body, span, div {
            font-family:sans-serif;
            font-size:14px;
        }
        .imagesIndex{
            margin-left:30px
        }
        .imagesIndex span.title{
            display:inline-block;
            padding:6px;
            padding-bottom:3px;
            background-color:white;
            color:black;
            cursor:pointer;
            margin-right:3px;
            -moz-border-radius:8px 8px 0px 0px;
            -webkit-border-top-right-radius:8px;
            -webkit-border-top-left-radius:8px;             
        }
        .imagesIndex span.title.selected{
            color:white;
            cursor:pointer;
        }
        .applContainer{
            background-color:black;
        }
        .descriptionBox{
            border-top:none;
            width:100%;         
            color:white;
        }
        .additionalContent{
            background-color:#000000;
            color:#FFFFFF;
            position: absolute;
            top:200px;
            left:250px;}

<!-- galleria css-->
        .content{color:#ccc;font:14px/1.4 arial,sans-serif;width:600px;margin:20px auto}
            h1{line-height:1.1;letter-spacing:-1px;}
            #galleria{height:400px;}

    </style>

    <script type="text/javascript">
        $(function(){
            $("#navArea").imageNavigator(
            {
                areaWidth: 1480,
                areaHeight:900,
                draggerStyle:"1px dotted red",
                navOpacity:.8
            })
        })
    </script>
</head>
<body >
<center>
<div id="navArea">

    <div style="display:none;" class="imagesContainer  {imageUrl:'main.jpg', navPosition:'BR', navWidth: 100}">

        <div class="additionalContent">

     this is an additional content div that is over the image and it moves with it!

   <!-- galleria html--> 
    <div id="galleria">
            <img title="Image title" alt="Image description is fetched from the alt attribute per default." src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Frederic_fontaine_1.jpg/500px-Frederic_fontaine_1.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/500px-Basket_of_strawberries_red_accent.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/500px-Laser_effects.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/500px-Costa_rica_santa_elena_skywalk.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/500px-Kuznetsk_Alatau_3.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/500px-Smoky_forest.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
        </div>

</div>
</center>

 <script>

    // Load the classic theme
    Galleria.loadTheme('../src/themes/classic/galleria.classic.js');

    // Initialize Galleria
    $('#galleria').galleria();

    </script>

</body></html>

Does anyone know how to fix this? Or if there's an easier way of achieving this? I have uploaded my work folder: http://www.sannahkhan.com/jqueryplugins.zip

Answer 1

0

Hi, first you are including three times jquery on your page, and this is not really good... Than what you are trying to do is difficult to obtain just because the mb.imageNavigator works for images but not for html content.

I think you should try other ways to get what you need. Bye, Matteo

answered Oct 19 '10 at 14:30

Matteo Bicocchi ♦♦
1776●1●2●9