Smashly Community Forums » PhotoSmash Help » How to have layout where thumb reveals hidden inline content

About this topic

  • Posted by zac 1 year ago. There are 6 posts. The latest reply is from byron.
  • This topic is not resolved

  1. zac
    Member
    Posted 1 year ago #

    Hi,

    I am trying to create a gallery where the thumb link reveals a hidden inline div (using jquery.colorbox) to show the full image along with a caption, date, story, etc.. What I came up with only succeeds in opening the modal window with all of the images and all of the content loaded up. Can someone help or offer some ideas of how I could have each thumb only show its associated image and data ?

    The code I was trying is this :

    <div class='bwbps_image'>
<a href="#sharePhotos" class="userThumb">[thumb_image]</a>
</div> <!-- // end thumb -->

<div style="display:none">
<div class="fullStory">
<div class="userFull">
[image]
</div>
<div class="userPhotoCaption">[caption]</div>
<div class="author">[user_name]</div>
<div class="userPhotoDate">[date_added]</div>
<div class="theUserSiteStory">[story]</div>
</div>
</div> <!-- // end full-sized image and story-->

    I think the problem is the colorbox code only knows to reveal the .fullStory div and can not isolate which one to show.

    $(".userThumb").colorbox({inline:true, href:".fullStory"});

    Maybe I could create an integer for the div id so that it only opened that specific block?

    Bleh.. there has to be a better way. Any ideas?

  2. byron
    Key Master
    Posted 1 year ago #

    Hey Zac,

    A couple of things:

    1) Instead of using $("#selector") for your jQuery with WordPress, it's probably safest to use the long form: jQuery("#selector"). WordPress uses the compatibility mode for jQuery.

    2) Here's some code to try...

    <div class='bwbps_image'>
<a id='myimage_[image_id]' href="#sharePhotos" class="userThumb">[thumb_image]</a>
</div> <!-- // end thumb -->

<div style="display:none" id='fullstory_[image_id]'>
<div class="fullStory">
<div class="userFull">
[image]
</div>
<div class="userPhotoCaption">[caption]</div>
<div class="author">[user_name]</div>
<div class="userPhotoDate">[date_added]</div>
<div class="theUserSiteStory">[story]</div>
</div>
</div> <!-- // end full-sized image and story-->

    Then change your jQuery to be:

    jQuery("#myimage_[image_id]").colorbox({inline:true, href:"#fullStory_[image_id]"});

    You will notice at the bottom of the layout editor that there is a Javascript Layout field. I think it is in the current shipping version. Here you can enter the name of another custom layout where you can configure your javascript call. That will be processed on each image and added to the footer. So, that Javascript above could be added to a separate layout that would be referenced by this one and it should print your JS in the footer.

    Hope that makes sense.

    Cheers,
    Byron

  3. zac
    Member
    Posted 1 year ago #

    Cool! Thanks Byron. I am still foundering with the javascript layout part. I guess I dont understand how to use it. I created another custom layout, called it colorbox,and pasted the jquery in the html input.

    jQuery("#myimage_[image_id]").colorbox({inline:true, href:"#fullStory_[image_id]"});

    and then in the main layout I put "colorbox" in the field for the Javascript Layout. I also tried just putting all the script in there but neither way printed anything in the footer. Thanks again for your help, I am much closer.

  4. byron
    Key Master
    Posted 1 year ago #

    Ok...my bad. I didn't complete that feature before releasing the last release. I think it's a good idea for a feature, but maybe not.

    At any rate, in your normal layout (remove the colorbox reference in the Javascript Layout field), try putting this in after all of your other code:

    <script type='text/javascript'> 

			// On Document Ready
			jQuery(document).ready(function() {
				jQuery("#myimage_[image_id]").colorbox({inline:true, href:"#fullStory_[image_id]"});
			});
</script>

    Maybe that'll do the trick.
    BB

  5. zac
    Member
    Posted 1 year ago #

    Yes! Thank you again. I swear I tried that :P

    I think this is a great idea for a feature...

    Cheers!

    z

  6. byron
    Key Master
    Posted 1 year ago #

    Welcome!

RSS feed for this topic