Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

.NET, JS Lightbox and Image Fader Scripts conflicting on a page...

Options
  • 08-07-2011 3:00pm
    #1
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭


    Hi Folks,

    I'm after adding a new image fader to my aspx page, (I'm using a MasterPage set up for this), and the problem I'm running into, is that I have a Lightbox script on the same page that uses the following files:

    <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>

    The above code goes in my aspx page for the Lightbox, but the code for my separate image fader, the code below goes in my MasterPage <head> area: 
    <head id="Head1" runat="server">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/fadeslideshow.js">

    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/

</script>
  <script type="text/javascript">

      var mygallery = new fadeSlideShow({
          wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
          dimensions: [350, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
          imagearray: [
        ["http://www.mydomain.com/Images/1.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
        ["http://www.mydomain/Images/2.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
        ["http://www.mydomain/Images/3.jpg"],
        ["http://www.mydomain.com/Images/4.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    ],
          displaymode: { type: 'auto', pause: 2500, cycles: 0, wraparound: false },
          persist: false, //remember last viewed slide and recall within same session?
          fadeduration: 2000, //transition duration (milliseconds)
          descreveal: "ondemand",
          togglerid: ""
      })

</script>

    Then for the image fader to work, I need to add:
     <div id="fadeshow1"></div>

    Where I want the image fader script to work...

    Initially I couldn't get the Image Fader script to work but I've just worked out that it will work just fine, IF I delete the three file references for my Lightbox Javascript from my aspx page:

    <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>

    If these three JS file references are present in my code (in my aspx page OR my MasterPage), my image fader script will not work at all...

    So I've worked out that I have some kind of a JS conflict going on here, I've tried moving the three Lightbox JS file references above into another ContentPlaceholder on my aspx page and also tried moving them into the Masterpage, (I think I had trouble with this before and ended up moving them into my aspx page from my MasterPage to get them to work properly all the time as opposed to only working for the first time the Lightbox script was run)...

    Just wondering is there any cheat/trick out there that I can use, to get these scripts working on the same page without conflicting with each other???

    Thanks in advance for any help with this... :confused:


Comments

  • Options
    #2
    stevenmu
    Moderators, Society & Culture Moderators Posts: 9,689 Mod ✭✭✭✭stevenmu


    Do you need the lightbox and fader scripts on the same page or will you only need one or the other?

    You could put the lightbox scripts in a contentplaceholder in the head of your master page, this will make them available in all pages by default. Then in your aspx pages where you want the fader you can put in a content control to override that placeholder, including the fader scripts instead.


  • Options
    #3
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    stevenmu wrote: »
    Do you need the lightbox and fader scripts on the same page or will you only need one or the other?

    You could put the lightbox scripts in a contentplaceholder in the head of your master page, this will make them available in all pages by default. Then in your aspx pages where you want the fader you can put in a content control to override that placeholder, including the fader scripts instead.

    I need both scripts to be working all the time on all pages on my site. The Image fader runs constantly on the page and the Lightbox is if a customer wants to view a product. I had another Image Fader script that worked with my Lightbox, but it's been on my mind to improve the Image Fader script to a new one I found that is more slick and looks tidier on the page...

    I'll try what you suggested above...


  • Options
    #4
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    No luck, what a headwrecker! :mad::mad::mad:


  • Options
    #5
    Procasinator
    Registered Users Posts: 1,311 ✭✭✭Procasinator


    I would imagine the conflict is between prototype/scriptaculous and jQuery. The $ global variable is used in many javascript libraries, but of course, only one can use it at a time.

    You can, however, make jquery not assign itself to $ by using the noConflict method: http://api.jquery.com/jQuery.noConflict/

    If that is the problem this should work, as long as the fadeSlideShow plugin is developed properly (not referencing a global $).

    All that said, I would recommend not mixing javascript frameworks if at all possible. The fact that the functionality is hugely overlapping means you are wasting users load time downloading multiple libraries. See if there is an alternative plugin that uses prototype instead if that is what you already have a dependency on.


  • Options
    #6
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    I've just tried taking out one line of the 3 lines of code that are causing the problem, this is the culprit here:

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

    When the other two lines are left in place the Image Fader works fine...


  • Advertisement
  • Options
    #7
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    Just wondering would anyone be able to recommend some good image transition scripts or solutions that are not based on JS?

    I'm not trying to do anything revolutionary here with my Image fader, it's just a simple transition that I want to use for rotating a few ads on my site...

    The Image Fader script I found that I was delighted with, (but won't work with my Lightbox which MUST stay in place), I found here:

    http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

    The effect found above is exactly what I'm looking for but unfortunately I'm not into JS enough to go pulling these this solution apart to try to get it working with my LightBox as suggested by Procrastinator above, (but thanks for the idea P!)...

    Is there any other way I can maybe go at this image fader? Also, not great with Flash lol!


  • Options
    #8
    stevenmu
    Moderators, Society & Culture Moderators Posts: 9,689 Mod ✭✭✭✭stevenmu


    HellFireClub wrote: »
    No luck, what a headwrecker! :mad::mad::mad:
    Yeah, it's only really a way to selectively not include the lightbox scripts on certain pages, not much use if you need them everywhere.

    I think you'll pretty much have to either find two different frameworks that will play nice together, or better yet one that does both like suggested above.


  • Options
    #9
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    Maybe it's time I bought the Flash for Dummies handbook?!? :D


  • Options
    #10
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    This is a pain in the hoop because it took me ages to get my Lighbox working off my DB (images are stored in my DB), then it wouldn't work right but I got that sorted.

    Now I've a perfect transition that I want to use on my site header but that won't work with the poxy LightBox. And every image fader I see on the web uses JS... :mad::mad::mad:


  • Options
    #11
    stevenmu
    Moderators, Society & Culture Moderators Posts: 9,689 Mod ✭✭✭✭stevenmu


    HellFireClub wrote: »
    but won't work with my Lightbox which MUST stay in place

    Do you really need to keep that specific lightbox? If not look at JQuery, there's countless plugins available for all kinds of image gallery stuff. Try googling for 'jquery slideshow lightbox' or something like that and look at some of the examples.


  • Advertisement
  • Options
    #12
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    I'm gonna give this one a shot for the image fader:

    http://smoothgallery.jondesign.net/download/

    After a strong coffee and 2 kalms! :D


Advertisement