SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting one value to correspond with a parent

    Hi,

    I've posted a similar question elsewhere but after a few days without response I thought I'd try my luck here...

    I'm trying to get isotope.js and shadowbox.js to play nicely together.

    To achieve the result I want I think all I need to do is set the value of 'x' in the following ('rel="lightbox[x]"') to be equal to its parent opacity.

    Code:
    <div class="thumb theme-Portraiture media-Works_on isotope-item isotope-hidden" style="position: absolute; left: 0px; top: 0px; -moz-transform: translate(28px, -5px) scale(0.001); opacity: 0;">
      <a rel="lightbox[x]" href="image_one_large.jpg">
       <img title="Image One" src="image_one_small.jpg"/>
      </a>
    </div>
    My guess is that there are at least two ways of doing this - either by extending the isotope script or by using some sort of 'onChange' preg_match. Right now, all methods escape me! :-(

    This seems so simple, but I just can't figure it out, so any help vastly appreciated!

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My best guess so far is to add a line like this:
    Code:
    $('a[rel^="lightbox"]').attr('rel','lightbox[PARENT/PREVIOUS OPACITY GOES HERE]'');

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, continuing this conversation with myself... this is my new best guess. It doesn't work, but equally doesn't throw any errors in Firebug either, so I'm none the wiser...

    $(function() {
    var opacity = $(this).parent().attr("style","opacity");
    opacity.change (function() {
    $('a[rel^="lightbox"]').val('rel','lightbox['+opacity.val()+']');
    });
    });

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For neatness, I'm posting my solution here. It's not perfect but it'll do for now...

    $('.option-set').change(function() {
    var $this = $(this);
    var delay = 1100; // 2 seconds delay after last input

    clearTimeout($this.data('timer'));
    $this.data('timer', setTimeout(function(){
    $this.removeData('timer');

    $('a[rel^="lightbox"]').each(function() {
    var opacity = $(this).parent().css("opacity");
    $(this).attr('rel','lightbox['+opacity+']');
    });
    Shadowbox.clearCache();
    Shadowbox.setup();
    }, delay));
    });

    I consider the problem solved (for now) so I'm happy for this thread to be closed.


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
  •