Tag Archive for: jQuery

Posts

Inline content slideshow with Colorbox

by Christie
September 17, 2011

So, here’s the situation.  I have a bunch of images, and each image has a larger version and some rich text content to go with it, that needs to be opened in a modal window.  All the related content for each image sits within the page, so I need to use inline content.  I am also using Colorbox for the modal window.  I had a hellofva time finding an appropriate tutorial and example for this online.  A lot of people are trying to do similar things, but there’s either no solution or what they want isn’t close enough to what I’m trying to accomplish.  Every photo needs to have its own link AND still be in a prev/next slider once the modal opens.

After a lot of trial and error, I figured out how to do it.  So here goes:

THE HTML

For your links themselves:

  <a href="#preview1" class="preview">Preview 1</a>
  <a href="#preview2" class="preview">Preview 2</a>
  <a href="#preview2" class="preview">Preview 3</a>

For the inline content boxes:

<div style="display:none">
    <div id="preview1" rel="previewBox">
          <div>Awesome HTML Content</div>
    </div>
    <div id="preview2" rel="previewBox">
          <div>Awesome HTML Content</div>
    </div>
    <div id="preview2" rel="previewBox">
          <div>Awesome HTML Content</div>
    </div>
</div>

THE JAVASCRIPT

<script type="text/javascript">

  $(document).ready(function() {

    $(".preview").colorbox({
      open:false,
      inline:true,
      html: function() {
          var div = $(this).attr('href'); return $(div).html();
      },
      href: $(this).attr('href'),
      rel: 'previewBox'
    });

  });

</script>

Anyway, here’s hoping this saves someone some time! This was done successfully with Colorbox 1.3.17.2 and jQuery 1.4.1.

0 Comments
, ,
, ,

Using jQuery Carousel with Thickbox

by Christie
May 24, 2009

Pretty simple problem. I wanted to use the jCarousel plugin for jQuery to have a scrolling list of items, using the ‘circular’ wrap, where you never reach an end. See: circular carousel, but I also wanted to use Thickbox, so that if someone clicks on the image, it opens up a modal window with more information. Carousel already comes with an example that uses thickbox, but it’s not for the circular carousel, just the linear one. See: jCarousel with Thickbox 3. Since the code here is different, applying tb_init(item) doesn’t work.

I scoured the internet, and got extremely discouraged as all threads on this topic either end with someone saying “Forget it, I just gave up” or the dreaded no response. So, like all big problems, I slept on it and awoke with a brilliant and obvious solution: force it.

Assuming you’re already familar with the methods of Thickbox, take yourself to the jCarousel function mycarousel_getItemHTML. Within this is the code where you would expect to add class=”thickbox” on the a tag and get the magic results. This won’t work.  Instead of having this:

return '<a href="#TB_inline?height=155&width=300&inlineId=
hiddenModalContent" title="' + item.title + '">
<img src="' + item.url + '" width="75" height="75" border="0"
alt="' + item.title + '" /></a>';

I put in a force call to the Thickbox function that intiates the window onclick:

return ‘<a href=”#” onclick=”tb_show(‘‘ + item.title + ‘‘, ‘#TB_inline?height=155&width=300&inlineId=hiddenModalContent’,’false’); return false;“><img src=”‘ + item.url + ‘” border=”0″ alt=”‘ + item.title + ‘” width=”75″ height=”75″ /></a>’;

Let’s break that down:

tb_show
Thickbox function that opens a modal window, takes 3 arguments

'" + item.title + "'
Here we assign the first argument to be the title tag you assigned in mycarousel_itemList
This will also be what shows as the title in your thickbox window

'#TB_inline?height=650&width=600&inlineId=contentid'
We’ve taken the normal href code from the a tag and stuck it into the second argument of the tb_show call instead! This simply works the same way as putting it in the href does, it just skips a few steps.

false
Not sure, but just make it false :)

return false;
I’ve added this in to make sure the browser doesn’t try to go to your blank link, now that the href is empty. returning false; will keep the browser where it is and enable your viewers to see your modal window.

0 Comments
, ,

Portfolio Items