Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Javascript Out of Hand

    Hi, I've been working at a website for quite some time now, one for my portfolio that displays my graphics design talents. However when coding this website I've run into quite a few problems. The most concerning being the photo gallery I am trying to set up inside of my website. I believe the problem I have is that I have two conflicting scripts, (in which case, how do I 'unconflict' them?) I have a sliding image header and I am using lightbox to create my gallery. While the slider works, my images only work as normal links rather than popping up on the screen.
    If you have any idea on how to fix this, please let me know. I am also open to other possibilities for a photo gallery.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Your problem description is too generic for us to give a solution. Which framework(s) are you using (jQuery, prototype??). Which plug-ins are you using? What is the code with which you embedded the framework(s) and plug-in(s)?

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry if my question seemed too generic. I'm used to figuring these things out on my own. I'll search for another method if I have to, but I really want this to work. So I'm not exactly sure what you mean, as I am less advanced in JS than HTML or CSS.
    This is the javascript that I am working with in the galleries, all of the information is in here:
    http://www.dynamicdrive.com/dynamici...box2/index.htm
    As for the slider, this is what I am working with. And this does work:
    /*
    * Easy Slider 1.5 - jQuery plugin
    * written by Alen Grakalic
    * http://cssglobe.com/post/4004/easy-s...in-for-sliding
    *
    * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
    * Dual licensed under the MIT (MIT-LICENSE.txt)
    * and GPL (GPL-LICENSE.txt) licenses.
    *
    * Built for jQuery library
    * http://jquery.com
    *
    */

    /*
    * markup example for $("#slider").easySlider();
    *
    * <div id="slider">
    * <ul>
    * <li><img src="images/01.jpg" alt="" /></li>
    * <li><img src="images/02.jpg" alt="" /></li>
    * <li><img src="images/03.jpg" alt="" /></li>
    * <li><img src="images/04.jpg" alt="" /></li>
    * <li><img src="images/05.jpg" alt="" /></li>
    * </ul>
    * </div>
    *
    */

    (function($) {

    $.fn.easySlider = function(options){

    // default configuration properties
    var defaults = {
    prevId: 'prevBtn',
    prevText: 'Previous',
    nextId: 'nextBtn',
    nextText: 'Next',
    controlsShow: true,
    controlsBefore: '',
    controlsAfter: '',
    controlsFade: true,
    firstId: 'firstBtn',
    firstText: 'First',
    firstShow: false,
    lastId: 'lastBtn',
    lastText: 'Last',
    lastShow: false,
    vertical: false,
    speed: 800,
    auto: false,
    pause: 2000,
    continuous: true
    };

    var options = $.extend(defaults, options);

    this.each(function() {
    var obj = $(this);
    var s = $("li", obj).length;
    var w = 830;
    var h = 250;
    obj.width(w);
    obj.height(h);
    obj.css("overflow","hidden");
    var ts = s-1;
    var t = 0;
    $("ul", obj).css('width',s*w);
    if(!options.vertical) $("li", obj).css('float','left');

    if(options.controlsShow){
    var html = options.controlsBefore;
    if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
    html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
    html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
    if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
    html += options.controlsAfter;
    $(obj).after(html);
    };

    $("a","#"+options.nextId).click(function(){
    animate("next",true);
    });
    $("a","#"+options.prevId).click(function(){
    animate("prev",true);
    });
    $("a","#"+options.firstId).click(function(){
    animate("first",true);
    });
    $("a","#"+options.lastId).click(function(){
    animate("last",true);
    });

    function animate(dir,clicked){
    var ot = t;
    switch(dir){
    case "next":
    t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;
    break;
    case "prev":
    t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
    break;
    case "first":
    t = 0;
    break;
    case "last":
    t = ts;
    break;
    default:
    break;
    };

    var diff = Math.abs(ot-t);
    var speed = diff*options.speed;
    if(!options.vertical) {
    p = (t*w*-1);
    $("ul",obj).animate(
    { marginLeft: p },
    speed
    );
    } else {
    p = (t*h*-1);
    $("ul",obj).animate(
    { marginTop: p },
    speed
    );
    };

    if(!options.continuous && options.controlsFade){
    if(t==ts){
    $("a","#"+options.nextId).hide();
    $("a","#"+options.lastId).hide();
    } else {
    $("a","#"+options.nextId).show();
    $("a","#"+options.lastId).show();
    };
    if(t==0){
    $("a","#"+options.prevId).hide();
    $("a","#"+options.firstId).hide();
    } else {
    $("a","#"+options.prevId).show();
    $("a","#"+options.firstId).show();
    };
    };

    if(clicked) clearTimeout(timeout);
    if(options.auto && dir=="next" && !clicked){;
    timeout = setTimeout(function(){
    animate("next",false);
    },diff*options.speed+options.pause);
    };

    };
    // init
    var timeout;
    if(options.auto){;
    timeout = setTimeout(function(){
    animate("next",false);
    },options.pause);
    };

    if(!options.continuous && options.controlsFade){
    $("a","#"+options.prevId).hide();
    $("a","#"+options.firstId).hide();
    };

    });

    };

    })(jQuery);


    What else do you need to know to help me?

  • #4
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I really appreciate you taking your time to look at this by the way. Forgive me for not knowing exactly what needs to be shown to you. I'm somewhat inexperienced, but I'm so determined to figure out what the problem is.

  • #5
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    /*
    * Easy Slider 1.5 - jQuery plugin
    * written by Alen Grakalic
    * http://cssglobe.com/post/4004/easy-s...in-for-sliding
    *
    * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
    * Dual licensed under the MIT (MIT-LICENSE.txt)
    * and GPL (GPL-LICENSE.txt) licenses.
    *
    * Built for jQuery library
    * http://jquery.com
    *
    */
    
    /*
    * markup example for $("#slider").easySlider();
    *
    * <div id="slider">
    * <ul>
    * <li><img src="images/01.jpg" alt="" /></li>
    * <li><img src="images/02.jpg" alt="" /></li>
    * <li><img src="images/03.jpg" alt="" /></li>
    * <li><img src="images/04.jpg" alt="" /></li>
    * <li><img src="images/05.jpg" alt="" /></li>
    * </ul>
    * </div>
    *
    */
    
    (function($) {
    
    $.fn.easySlider = function(options){
    
    // default configuration properties
    var defaults = {
    prevId: 'prevBtn',
    prevText: 'Previous',
    nextId: 'nextBtn',
    nextText: 'Next',
    controlsShow: true,
    controlsBefore: '',
    controlsAfter: '',
    controlsFade: true,
    firstId: 'firstBtn',
    firstText: 'First',
    firstShow: false,
    lastId: 'lastBtn',
    lastText: 'Last',
    lastShow: false,
    vertical: false,
    speed: 800,
    auto: false,
    pause: 2000,
    continuous: true
    };
    
    var options = $.extend(defaults, options);
    
    this.each(function() {
    var obj = $(this);
    var s = $("li", obj).length;
    var w = 830;
    var h = 250;
    obj.width(w);
    obj.height(h);
    obj.css("overflow","hidden");
    var ts = s-1;
    var t = 0;
    $("ul", obj).css('width',s*w);
    if(!options.vertical) $("li", obj).css('float','left');
    
    if(options.controlsShow){
    var html = options.controlsBefore;
    if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
    html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
    html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
    if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
    html += options.controlsAfter;
    $(obj).after(html);
    };
    
    $("a","#"+options.nextId).click(function(){
    animate("next",true);
    });
    $("a","#"+options.prevId).click(function(){
    animate("prev",true);
    });
    $("a","#"+options.firstId).click(function(){
    animate("first",true);
    });
    $("a","#"+options.lastId).click(function(){
    animate("last",true);
    });
    
    function animate(dir,clicked){
    var ot = t;
    switch(dir){
    case "next":
    t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;
    break;
    case "prev":
    t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
    break;
    case "first":
    t = 0;
    break;
    case "last":
    t = ts;
    break;
    default:
    break;
    };
    
    var diff = Math.abs(ot-t);
    var speed = diff*options.speed;
    if(!options.vertical) {
    p = (t*w*-1);
    $("ul",obj).animate(
    { marginLeft: p },
    speed
    );
    } else {
    p = (t*h*-1);
    $("ul",obj).animate(
    { marginTop: p },
    speed
    );
    };
    
    if(!options.continuous && options.controlsFade){
    if(t==ts){
    $("a","#"+options.nextId).hide();
    $("a","#"+options.lastId).hide();
    } else {
    $("a","#"+options.nextId).show();
    $("a","#"+options.lastId).show();
    };
    if(t==0){
    $("a","#"+options.prevId).hide();
    $("a","#"+options.firstId).hide();
    } else {
    $("a","#"+options.prevId).show();
    $("a","#"+options.firstId).show();
    };
    };
    
    if(clicked) clearTimeout(timeout);
    if(options.auto && dir=="next" && !clicked){;
    timeout = setTimeout(function(){
    animate("next",false);
    },diff*options.speed+options.pause);
    };
    
    };
    // init
    var timeout;
    if(options.auto){;
    timeout = setTimeout(function(){
    animate("next",false);
    },options.pause);
    };
    
    if(!options.continuous && options.controlsFade){
    $("a","#"+options.prevId).hide();
    $("a","#"+options.firstId).hide();
    };
    
    });
    
    };
    
    })(jQuery);

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Ok you showed us the two plug-ins you are using (one is a jQuery plug-in the other is a "pure" Javascript plug-in) but you did not show us how you embedded those plug-ins and jQuery on YOUR PAGE.

  • #7
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, thank you. I was confused as to what you meant.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DreamKey</title>
    <link href="style/default.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="style/lightbox.css" type="text/css" media="screen" />
    
    
    <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>
    
    	<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/easySlider1.5.js"></script>
    
    
    			
    	</script>
    
        <script type="text/javascript" src="js/tabs.js"></script>
        
    </head>
    This is where I started to name them, then further beneath are just the header/navigation system. I'd read something about using the "body Onload" tag to separate the scripts. So I tried what was suggested, only for nothing to happen once again. This was what I inserted directly beneath the last bit:
    Code:
    <body onload="MM_preloadImages(/images/image-1.jpg);initLightbox()">

    Below the header/logo is this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DreamKey</title>
    <link href="style/default.css" rel="stylesheet" type="text/css" />
    
    	<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/easySlider1.5.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){	
    			$("#slider").easySlider();
    		});	
    	</script>
    
        <script type="text/javascript" src="js/tabs.js"></script>
    
    </head>
    Beneath that is the html linked to the easySlider

    Then the navbar

    And then the page content where it gets messed up:
    Code:
    <a href="images/posts/01.jpg" rel="lightbox" title="my caption">image #1</a>

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Okay now I see that the lightbox is not a "pure" Javascript plug-in but rather a prototype plug-in. Prototype is another Javascript framework and it's generally never a really good idea to use more than one framework on the same page (although it works sometimes).

    What you'll have to do: Switch jQuery to its noConflict mode and pray :-)
    Code:
    var $j = jQuery.noConflict();
    (function($) {
       $(document).ready(function() {
          // your jQuery code goes here
       });
    })($j);
    
    // your prototype code goes here

  • #9
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for checking this out. I hope it does work, but may I ask you watch javascript file you are looking at? Or what section? I'm not quite sure where you are.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    The code I provided with my last answer will be in the Javascript section of your page ... there should already be such a <script> tag (presumably where you call the plug-in methods)

    Btw, there seems to be a "dangling" closing </script> tag in your code that doesn't belong to any opening <script> tag

  • #11
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope, the added code just spilled my easySlider all down my page. And the image still won't do what it's been told to. Hm, I wonder what on earth it could be? Do you think it's unfixable?

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Without your code I cannot tell


  •  

    Tags for this Thread

    Posting Permissions

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