Announcement

Collapse
No announcement yet.

Combining Lightbox and Slideshow scripts

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Combining Lightbox and Slideshow scripts

    I have been running a slideshow on our home page with no problems - http://www.natorigin.co.uk/

    I have now added a Lightbox script which works well - http://www.natorigin.co.uk/acatalog/...ailPorter.html

    But now this has messed up the slideshow on the home page - http://www.natorigin.co.uk/acatalog/test/index.html

    I believe it is something to do with the code I have place in the <head> section.

    For the Lightbox I have added these lines:
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    If I put these below the script for slideshow then the lightbox work but not the slideshow.
    If place these above the script for slideshow then the slideshow work but not the lightbox.

    Any suggestions for a fix please.

    Thanks

    James
    www.butterflies-healthcare.co.uk
    www.viteyes.co.uk - vitamins for macular degeneration
    www.natorigin.co.uk - natural/organic cosmetics and skin care for sensitive skin & eyes
    www.butterflies-eyecare.co.uk - eye drops, vitamins and other eye care products
    www.prescription-swimming-goggles.co.uk - optical and prescription swimming goggles

    #2
    You are trying to use two libraries - jQuery and prototype/scriptaculous - on the same page. You are using jQuery for several add-ons and prototype/scriptaculous only for the Lightbox.

    You may be able to use jQuery's noconflict capability (google for it) to resolve this but you'll need to know what you are doing.

    Best solution would be to use a jQuery based Lightbox clone - see http://planetozh.com/projects/lightbox-clones/ for one list. You won't then have the overhead of loading two libraries.

    I've used both Slimbox2 and Fancybox for my jQuery based Lightbox add-ons.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      P.S. You should also go through your code and make sure that you're not loading jQuery more than once. At the moment you're loading it several times (and probably different versions as well).

      Except for my Accordion Menu where I only load it if it's not already there. E.g.
      Code:
      <script type="text/javascript">
      if ( typeof(jQuery) == 'undefined' ) document.write('<script type="text/javascript" src="jquery.min.js"></sc' + 'ript>');
      </script>
      Norman - www.drillpine.biz
      Edinburgh, U K / Bitez, Turkey

      Comment


        #4
        Thanks for the help Norman.

        One thing I am not sure about, you say I am loading JQuery several times.

        Do I need to search through the code on the site for where this is used and only have once, or is it in externally linked file CSS and .js?

        Thanks

        James
        www.butterflies-healthcare.co.uk
        www.viteyes.co.uk - vitamins for macular degeneration
        www.natorigin.co.uk - natural/organic cosmetics and skin care for sensitive skin & eyes
        www.butterflies-eyecare.co.uk - eye drops, vitamins and other eye care products
        www.prescription-swimming-goggles.co.uk - optical and prescription swimming goggles

        Comment


          #5
          Actinic doesn't need and doesn't load jQuery. If it's there, it's because you (or someone working for you) has put it there.

          I see 3 instances of it:

          1) When you also load fadeslideshow.js

          2) When you also load jquery.cycle.all.js

          3) When you are using my Accordion Menu (and then loading ddaccordion.js).

          (1) and (2) are probably in code you've added to your Overall Layout.

          Try deleting the line that loads jQuery in (2) above. That way it will be already loaded at (1). You don't need to tweak (3) as my code will automatically skip loading jQuery when it finds it already there.

          There's one caveat. My Accordion Menu is intended to work with jQuery 1.3.2 and you may have layout issues in old versions of Internet Explorer if using a later version of jQuery.

          It may be necessary to tweak your code at (1) to load jQuery 1.3.2 instead of the 1.4.2 you are using.
          Norman - www.drillpine.biz
          Edinburgh, U K / Bitez, Turkey

          Comment


            #6
            Can you offer a bit more help Norman.

            The jQuery from 1 was old code, so have removed this. How do I tell if the jquery.cycle.all.js is the right version as I have had a quick look and it the header it says:
            /*!
            * jQuery Cycle Plugin (with Transition Definitions)
            * Examples and documentation at: http://jquery.malsup.com/cycle/
            * Copyright (c) 2007-2010 M. Alsup
            * Version: 2.88 (08-JUN-2010)
            * Dual licensed under the MIT and GPL licenses.
            * http://jquery.malsup.com/license.html
            * Requires: jQuery v1.2.6 or later
            */


            I have now tried to implement Slimbox, and in the header section I have:
            <!-- start Slimbox code -->
            <script type="text/javascript" src="mootools.js"></script>
            <script type="text/javascript" src="slimbox.js"></script>
            <link rel="stylesheet" href="slimbox.css" type="text/css" media="screen" />
            <!-- end Slimbox code -->

            Then in actinic have tried to test with:
            !!<<a href="GailPorter2.jpg" rel="lightbox" title="my caption">image #1</a>>!!

            The .j sand .css files are beign uploaded to the catalogue folder, but the effect is still not working (the image are loading in the new page) - http://www.natorigin.co.uk/acatalog/...ailPorter.html

            Any idea where I have gone wrong?

            Thanks again

            James
            www.butterflies-healthcare.co.uk
            www.viteyes.co.uk - vitamins for macular degeneration
            www.natorigin.co.uk - natural/organic cosmetics and skin care for sensitive skin & eyes
            www.butterflies-eyecare.co.uk - eye drops, vitamins and other eye care products
            www.prescription-swimming-goggles.co.uk - optical and prescription swimming goggles

            Comment


              #7
              Can you offer a bit more help Norman.
              Not much. This is a volunteer forum and it's best not to ask individuals directly for their help. It places way too much burden on individuals. And others who might have been able to help may pass by because you're asking for someone specific.

              Other than to say that the Slimbox you've chosen isn't jQuery based. You'll have the same problem with Mootools as you were having with Prototype.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                Sorry, my intention was not to offend simply that as you had answered so thought I would address the reply to you.

                Thank you for the help so far.

                James
                www.butterflies-healthcare.co.uk
                www.viteyes.co.uk - vitamins for macular degeneration
                www.natorigin.co.uk - natural/organic cosmetics and skin care for sensitive skin & eyes
                www.butterflies-eyecare.co.uk - eye drops, vitamins and other eye care products
                www.prescription-swimming-goggles.co.uk - optical and prescription swimming goggles

                Comment

                Working...
                X