Page 1 of 7 123 ... LastLast
Results 1 to 10 of 63

Thread: Javascript variables not displaying

  1. #1
    Join Date
    Jul 2012
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Javascript variables not displaying

    Hi

    I'm trying to put some social media links inside a lightbox. I have some code that works but it's very lengthy with many repeated links. To make things more managable I'm trying to use variables to shorten things.

    In the following code the onClick="window.open(fb_url_comb,fb_name,fb_size) variable works fine. However the href=\'document.write(var fb_url_comb);\' and src=\'document.write(fb_icon);\' do not return their variables, they return the actual code as a string. I've tried many different formats using different combinations of quotes and syntax with no luck.

    Code:
    <script type="text/javascript">
    <!--
    var fb_var = "http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=";
    var fb_name = "fbwindow";
    var fb_size = "width=600,height=350";
    var fb_icon = "http://likebreathing.com/exp/facebook-16x16.gif";
    var pic_url = "http://likebreathing.com/india/125_india.jpg";
    var fb_url_comb = fb_var + pic_url;
    //-->
    </script>
    
    <a href="http://likebreathing.com/india/125_india.jpg" rel="lightbox"
    
    onmousedown="this.title='&lt;a onClick=&quot;window.open(fb_url_comb,fb_name,fb_size);&quot; href=\'document.write(var fb_url_comb);\' rel=\'nofollow\'&gt;&lt;img src=\'document.write(fb_icon);\' alt=\'Facebook icon\' /&gt;&lt;/a&gt;';"
    onmouseout="this.title='';">
    
    <img src="http://likebreathing.com/india/t125_india.jpg" alt="Indian School Kids" /></a>
    This code src=\'document.write(fb_icon);\' should show me the icon, but it displays the alt tag instead. If I use this src=\'http://likebreathing.com/exp/facebook-16x16.gif\' the icon displays fine.

    If I use the variables outside of the onmousedown code they also work fine, so I guess this is just a syntax thing.

    An example can be seen here: http://likebreathing.com/exp/india2.html
    The code is attached to: 125_india.jpg (third along, two down).

    I have a limited knowledge of javascript, so I'm not sure if I'm even going about this in the right way. Please suggest a different way if there is a better solution. Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    I think there must be a better way to get what you want, but doing it this way appears to work:

    Code:
    <a href="http://likebreathing.com/india/125_india.jpg" rel="lightbox" 
    onmousedown="this.title='<a onClick=&quot;window.open(fb_url_comb,fb_name,fb_size);&quot; href=&quot;' + fb_var + pic_url + '&quot; rel=\'nofollow\'><img src=&quot;' + fb_icon + '&quot; alt=\'Facebook icon\' /></a>';" 
    onmouseout="this.title='';" title="">
      <img src="http://likebreathing.com/india/t125_india.jpg" alt="Indian School Kids">
    </a>
    It's nice to see Lokesh is using jQuery for Lightbox now. I think I still prefer some other scripts that do a lightbox. Some of them make it much easier to get this sort of effect (a Facebook link for example) without so much code having to be in the page. They were all inspired by Lokesh though.
    Last edited by jscheuer1; 07-17-2012 at 10:53 PM. Reason: include " for href and src, later add comments
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    LikeBreathing (07-18-2012)

  4. #3
    Join Date
    Jul 2012
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    Thank you very much for helping me out, looks like I was trying to over complicate things. This works perfectly!

    What Lightbox version would you recommend for better integration with these social media links? I've stuck with Lightbox2 as it seemed fairly popular with a good amount of support, but if there is something which is easier and requires less code I'd be interested.

    Thanks again.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    For now I think we should just look into a better way to carry this out. Of this information:

    Code:
    var fb_var = "http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=";
    var fb_name = "fbwindow";
    var fb_size = "width=600,height=350";
    var fb_icon = "http://likebreathing.com/exp/facebook-16x16.gif";
    var pic_url = "http://likebreathing.com/india/125_india.jpg";
    var fb_url_comb = fb_var + pic_url;
    Only the highlighted appears to need to be customized for each title/link. And the last can be derived from fb_var (which I'm assuming is constant) and pic_url (which I'm assuming is the url to the image, also the href of the link you're attaching the onmousedown code to.

    So to get all lightboxes on a page to do this, we should be able to skip everything in your post except:

    HTML Code:
    <a href="http://likebreathing.com/india/125_india.jpg" rel="lightbox" title="">
      <img src="http://likebreathing.com/india/t125_india.jpg" alt="Indian School Kids">
    </a>
    And add this script to the head of the page after the scripts for jQuery and Lightbox:

    Code:
    <script type="text/javascript">
    ;(function($){
    	var fb_var = "http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=";
    	var fb_name = "fbwindow";
    	var fb_size = "width=600,height=350";
    	var fb_icon = "http://likebreathing.com/exp/facebook-16x16.gif";
    
    	$(document).on('mousedown mouseleave', 'a[rel^=lightbox]', function(e){
    		if(e.type === 'mouseleave') {this.title = ''; return;}
    		var fb_url_comb = fb_var + encodeURIComponent(this.href);
    		this.title='<a onclick="window.open(fb_url_comb,fb_name,fb_size);" href="' +
    			fb_url_comb + '" rel="nofollow"><img src="' +
    			fb_icon + '" alt="Facebook icon" /></a>';
    	})
    })(jQuery);
    </script>
    It will get all the lightboxes acting like that.
    Last edited by jscheuer1; 07-18-2012 at 03:54 PM. Reason: code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Jul 2012
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    Thanks, that has certainly reduced the amount of code I need and puts the icon on each lightbox. It's definitely more managable.

    At the moment clicking the FB icon in the lightbox doesn't do anything. I know I had a similar problem when trying to use the href tag in title="", links would display but not work. This is why I ended up using onclick="window.open(...

    The updated code is: http://likebreathing.com/exp/india2a.html

    Any ideas?

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    I'm not sure. It was working here. But I see the variables aren't getting resolved in the onclick function because the text is being passed literally, not as the value assigned. And I know they're out of scope. The link is right though because I used substitution there. Let's try this:

    Code:
    <script type="text/javascript">
    ;(function($){
    	var fb_var = "http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=";
    	var fb_name = "fbwindow";
    	var fb_size = "width=600,height=350";
    	var fb_icon = "http://likebreathing.com/exp/facebook-16x16.gif";
    
    	$(document).on('mousedown mouseleave', 'a[rel^=lightbox]', function(e){
    		if(e.type === 'mouseleave') {this.title = ''; return;}
    		var fb_url_comb = fb_var + encodeURIComponent(this.href);
    		this.title='<a onclick="window.open(this.href, \'' + fb_name + '\', \'' + fb_size +'\'); return false;" href="' +
    			fb_url_comb + '" rel="nofollow"><img src="' +
    			fb_icon + '" alt="Facebook icon" /></a>';
    	})
    })(jQuery);
    </script>
    I've changed the onclick to substitution as well, except for the use of this.href which it will get from the newly made link. It works here, but so did the other, which it shouldn't now that I think about it. This has a much better chance.

    If it still doesn't work I've at least one other idea. Let me know.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Jul 2012
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    Looking good, the links now work!
    I did a quick test in FF, IE and Chrome, they all show positive results.

    Thanks again.



    I have another query concerning Lightboxes and social media links. Again this is a piece of AddThis code, but the code is completely different. Should I post it here or start a new thread?

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    OK, mmm if it's still for the title attribute on the Lightbox, we can do it here. If it's something completely different, please start a new thread.

    I noticed something odd about this arrangement though. In Chrome and IE 9, if you mouse down on the image and hold, and move the mouse a little, you see all that code as a sort of tooltip.

    I think this modification will take care of that:

    Code:
    <script type="text/javascript">
    ;(function($){
    	var fb_var = "http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=";
    	var fb_name = "fbwindow";
    	var fb_size = "width=600,height=350";
    	var fb_icon = "http://likebreathing.com/exp/facebook-16x16.gif";
    
    	$(document).on('mousedown mouseleave mousemove', 'a[rel^=lightbox]', function(e){
    		if(e.type !== 'mousedown') {this.title = ''; return;}
    		var fb_url_comb = fb_var + encodeURIComponent(this.href);
    		this.title='<a onclick="window.open(this.href, \'' + fb_name + '\', \'' + fb_size +'\'); return false;" href="' +
    			fb_url_comb + '" rel="nofollow"><img src="' +
    			fb_icon + '" alt="Facebook icon" /></a>';
    	})
    })(jQuery);
    </script>
    It may or may not hurt the functionality. I don't think it will, but it should be checked.

    I'm thinking that, since the title becomes the caption, we could perhaps edit the Lightbox script or just tell it to use other code there so as to use a different attribute, or even a function to make the caption so you wouldn't need a title at all. That's what I was talking about with other Lightbox type script. jQuery Slimbox2 is set up to take a customizable function for creating the caption. And Pretty Photo has stock FB and Twitter links. Different than what you're after I think. But they might be easily customizable.

    Or we could use a more or less normal title, and make it become the link without needing to put all that code in the title.

    When I have more time I'll look into those ideas.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    LikeBreathing (07-20-2012)

  11. #9
    Join Date
    Jul 2012
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    Found some time to give this a proper test...

    With the above code in IE9 I don't see any icons in the Lightbox, although I do with both FF and Chrome. Also in IE I so see the occasional tool-tip which I don't in Chrome. I think the tool-tip appears if the mouse is over the image when rendering on screen. Doesn't appear after the mouse if moved.

    In the previous code I see the icons on all browsers, but as you mentioned you do see tool-tips, especially in IE.

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Since I posted that, I found the time I needed to test one of my other ideas. And I saw your other thread about addthis. So I decided to combine the two and it appears to work. I also discovered that the addthis code has to think it's on your domain in order to work properly. That's probably due to the hash:

    #pubid=ra-4ff5721a4e9875e3

    added to the src attribute for the addthis script hosted on their server. I was able to get it to think that by using a base tag, which I've not included in the demo below because if you put it on your server, it will be fine without it.

    What I did was to make a slight alteration to lightbox.js that allows its functions to be controlled and/or replaced globally from outside the script. I could have edited it more extensively, but I wanted to allow it to function normally if used alone. At the end of lightbox.js, it has:

    Code:
      $(function() {
        var lightbox, options;
        options = new LightboxOptions;
        return lightbox = new Lightbox(options);
      });
    
    }).call(this);
    I changed that to:

    Code:
      $(function() {
        var lightbox, options;
        options = new LightboxOptions;
        return this.lightbox = new Lightbox(options); // altered to place the lightbox instance in the document's scope (document.lightbox)
      });
    
      this.Lightbox = Lightbox; // added to allow access to Lightbox in the global scope - jds
      this.LightboxOptions = LightboxOptions; // added to allow access to LightboxOptions in the global scope - jds
    
    }).call(this);
    I also added this comment (highlighted) near the top:

    Code:
    /*
    Lightbox v2.51
    by Lokesh Dhakar - http://www.lokeshdhakar.com
    
    For more information, visit:
    http://lokeshdhakar.com/projects/lightbox2/
    
    Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
    - free for use in both personal and commercial projects
    - attribution requires leaving author name, author link, and the license info intact
    	
    Thanks
    - Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
    - Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
    
    * Jul 19th 2012 - Unofficial update - place Lightbox functions in the global scope - John Davenport Scheuer (jds)
    
    Table of Contents
    =================
    LightboxOptions
    
    Lightbox
    - cons . . .
    That allows this demo to work:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" href="http://likebreathing.com/exp/lb.css" type="text/css" />
    	<link rel="stylesheet" href="http://likebreathing.com/exp/lightbox.css" type="text/css" media="screen" />
    	<link rel="shortcut icon" href="http://likebreathing.com/images/favicon.ico" />
    <script src="http://likebreathing.com/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="http://likebreathing.com/exp/lightbox.js" type="text/javascript"></script>
    <script type="text/javascript">
        Lightbox.prototype.start = function($link) {
          var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
          $(window).on("resize", this.sizeOverlay);
          $('select, object, embed').css({
            visibility: "hidden"
          });
          $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
          this.album = [];
          imageNumber = 0;
          if ($link.attr('rel') === 'lightbox') {
            this.album.push({
              link: $link.attr('href'),
              title: $link.data('caption')
            });
          } else {
            _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
            for (i = 0, _len = _ref.length; i < _len; i++) {
              a = _ref[i];
              this.album.push({
                link: $(a).attr('href'),
                title: $(a).data('caption')
              });
              if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
            }
          }
          $window = $(window);
          top = $window.scrollTop() + $window.height() / 10;
          left = $window.scrollLeft();
          $lightbox = $('#lightbox');
          $lightbox.css({
            top: top + 'px',
            left: left + 'px'
          }).fadeIn(this.options.fadeDuration);
          this.changeImage(imageNumber);
        };
    
        Lightbox.prototype.updateDetails = function() {
          var $lightbox,
            _this = this;
          $lightbox = $('#lightbox');
          if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
            $lightbox.find('.lb-caption').empty().append(this.album[this.currentImageIndex].title.clone(true)).fadeIn('fast');
          }
          if (this.album.length > 1) {
            $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + '  ' + this.album.length).fadeIn('fast');
          } else {
            $lightbox.find('.lb-number').hide();
          }
          $lightbox.find('.lb-outerContainer').removeClass('animating');
          $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
            return _this.sizeOverlay();
          });
        };
    
    jQuery(function($){
    	var $addthisdiv = $('<div style="display: none;"></div>').appendTo('body'),
    	$triggers = $('a[rel^=lightbox]');
    	$triggers.each(function(i){
    			var $cap = $('<div class="addthis_toolbox addthis_default_style" addthis:url="' + this.href + '"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_pinterest_pinit"></a><a class="addthis_counter addthis_pill_style"></a></div>');
    			$triggers.eq(i).data('caption', $cap);
    			$addthisdiv.append($cap);
    		});
    	window.addthis_config = {'data_track_addressbar':true};
    	$('<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ff5721a4e9875e3"><\/script>').appendTo('body');
    });
    
    </script></head>
    <body>
    <a href="http://likebreathing.com/india/091_india.jpg" rel="lightbox"><img src="http://likebreathing.com/india/t091_india.jpg" alt="India Landscape" /></a><br>
    <a href="http://likebreathing.com/india/146_india.jpg" rel="lightbox"><img src="http://likebreathing.com/india/t146_india.jpg" alt="India Temple" /></a>
    </body>
    </html>
    Once we get that working for you, I think you can easily see how to set it up to work with your full page of images.

    Remember, it needs the updated copy of lightbox.js which I'm also attaching here (right click and 'Save As'):

    Attachment 4556

    This code from the demo:

    Code:
        Lightbox.prototype.start = function($link) {
          var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
          $(window).on("resize", this.sizeOverlay);
          $('select, object, embed').css({
            visibility: "hidden"
          });
          $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
          this.album = [];
          imageNumber = 0;
          if ($link.attr('rel') === 'lightbox') {
            this.album.push({
              link: $link.attr('href'),
              title: $link.data('caption')
            });
          } else {
            _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
            for (i = 0, _len = _ref.length; i < _len; i++) {
              a = _ref[i];
              this.album.push({
                link: $(a).attr('href'),
                title: $(a).data('caption')
              });
              if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
            }
          }
          $window = $(window);
          top = $window.scrollTop() + $window.height() / 10;
          left = $window.scrollLeft();
          $lightbox = $('#lightbox');
          $lightbox.css({
            top: top + 'px',
            left: left + 'px'
          }).fadeIn(this.options.fadeDuration);
          this.changeImage(imageNumber);
        };
    
        Lightbox.prototype.updateDetails = function() {
          var $lightbox,
            _this = this;
          $lightbox = $('#lightbox');
          if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
            $lightbox.find('.lb-caption').empty().append(this.album[this.currentImageIndex].title.clone(true)).fadeIn('fast');
          }
          if (this.album.length > 1) {
            $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + '  ' + this.album.length).fadeIn('fast');
          } else {
            $lightbox.find('.lb-number').hide();
          }
          $lightbox.find('.lb-outerContainer').removeClass('animating');
          $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
            return _this.sizeOverlay();
          });
        };
    
    jQuery(function($){
    	var $addthisdiv = $('<div style="display: none;"></div>').appendTo('body'),
    	$triggers = $('a[rel^=lightbox]');
    	$triggers.each(function(i){
    			var $cap = $('<div class="addthis_toolbox addthis_default_style" addthis:url="' + this.href + '"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_pinterest_pinit"></a><a class="addthis_counter addthis_pill_style"></a></div>');
    			$triggers.eq(i).data('caption', $cap);
    			$addthisdiv.append($cap);
    		});
    	window.addthis_config = {'data_track_addressbar':true};
    	$('<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ff5721a4e9875e3"><\/script>').appendTo('body');
    });
    could go in an external file. But for now, let's leave it on the page so we can more easily work out any bugs it might have.
    Last edited by jscheuer1; 07-20-2012 at 06:14 PM. Reason: revert to an earlier, better version
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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