WordPress.org

Ready to get started?Download WordPress

Forums

ThickBox Content
Button thickbox (14 posts)

  1. thumbtak
    Member
    Posted 2 years ago #

    I want to use...

    [big-button]more[/big-button]

    ...with thickbox. How do I make a button and make it open in thickbox.

    http://wordpress.org/extend/plugins/thickbox-content/

  2. Max Chirkov
    Member
    Plugin Author

    Posted 2 years ago #

    You can copy and paste this into your HTML editor:

    [thkBC height="300" width="500" anchortext="My Big Button" title="My Big Button" type="inline" inline_id="my_big_button"]
    <div id="my_big_button"><p>[big-button]more[/big-button]</p></div>

    Here is the step-by-step process:

    1. Create a <div id="unique_id"> layer with a unique ID, and a paragraph <p> inside with the content that should appear in the Thickbox.
    2. Click on the Thickbox icon in the editor panel
    3. Enter link anchor text and the ThickBox Title
    4. Change "Show as" to "Inline"
    5. Enter the inline ID you assigned to your div & click Insert.
    6. thumbtak
      Member
      Posted 2 years ago #

      [thkBC height="275" width="650" anchortext="More" title="More" type="inline" inline_id="o11"]
      <div id="o11"><p>[big-button color="blue" link="http://google.com"]more[/big-button]</p></div>

      This adds a button on the thickbox window. This isn't what I want. I want a botton that opens up the thickbox window.

      Example: You go to the site. You click the big blue button. The thickbox window opens with the iframe content.

    7. Max Chirkov
      Member
      Plugin Author

      Posted 2 years ago #

      @thumbtak - that's what I thought, but your initial post said "button open IN thickbox"... anyway, thanks for the clarification. I don't think you can do that with a shortcode. You would have to use a raw link parameter in shortcode and it will only work if you can add a class "thickbox" to the shortcode as attribute.

      There is good information how to create thickbox links manually here http://jquery.com/demo/thickbox/ - scroll to the part where it says "Inline Content"

      Your code should look like this:

      [big-button color="blue" class="thickbox" link="?height=300&width=300&inlineId=my_thickbox_content"]My Big Button[/big-button]
      <div id="my_thickbox_content"><p>Thickbox content goes here.</p></div>

      Actually, you should be able to paste the above code and it should work as is. The only way it won't work if your butoon shortcode doesn't support class attribute...

    8. thumbtak
      Member
      Posted 2 years ago #

      I added the code you said above, and read the inline content at the link you gave.

      This is what I got:
      http://i44.tinypic.com/1t4tpw.png

      Now. The button does nothing, even after adding the link before the question mark. The other part is text that does nothing. What I want is the button to open the thickbox window without showing any text below it. The button will open up a link and show it in the thickbox window.

    9. Max Chirkov
      Member
      Plugin Author

      Posted 2 years ago #

      Can you post a live link to the example above?

    10. thumbtak
      Member
      Posted 2 years ago #

      Here is the exact code that is used for the example.

      [big-button color="blue" class="thickbox" link="http://google.com?height=300&width=300&inlineId=my_thickbox_content"]My Big Button[/big-button]
      <div id="my_thickbox_content"><p>Thickbox content goes here.</p></div>

      Here is the link to the page it can be found on:
      Link

    11. Max Chirkov
      Member
      Plugin Author

      Posted 2 years ago #

      @thumbtak - I hope you're realizing that we're talking about not my plugin here, but rather about a very unique case of a very specific shortcode provided by your theme(?) or another plugin. So, this is not a support question.

      Now, this is a basic HTML thing. Your button's shortcode generated the following HTML:

      <a href="http://google.com?height=300&width=300&inlineId=my_thickbox_content"class="big-btn blue" target="">My Big Button</a>

      So, it looks like it doesn't support "class" attribute, because the class thickbox was not added.
      Anyway, this is the code that you need at the end:

      <a class="big-btn blue" href="#TB_inline?height=300&width=500&inlineId=my_big_button_window" title="Big Button Window" class="thickbox">My Big Button</a>
      <div id="my_big_button_window">
      <p>Thickbox content goes here.</p>
      </div>

      Copy and paste that into your post as is and forget about the shortcodes.

    12. thumbtak
      Member
      Posted 2 years ago #

      Thanks for your help.

      This is how I fixed the issue.

      - I manually setup thickbox, which I found out wasn't needed, but it worked.

      - I made a stand alone wordpress button. Took a screenshoot and cropped out the button. I then edited the button to remove the background.

      - I then uploaded the image to a folder on my server.

      - I used the following custom code.

      <a href="?ajax.PHP?keepThis=true&TB_iframe=true&height=275&width=650" title="More" class="thickbox"><img src="../images/buttons/more.png" border="0"></a>

    13. Max Chirkov
      Member
      Plugin Author

      Posted 2 years ago #

      Have you tried the solution I posted in my last reply? It's the same button that you initially had and much easier that what you came up with. Whatever works for you the best.

    14. thumbtak
      Member
      Posted 2 years ago #

      I did try it. It had the same outcome. A button and text below it, with the issue of the button not working.

    15. Max Chirkov
      Member
      Plugin Author

      Posted 2 years ago #

      Sorry, the link had 2 classes, that must've broke it. Here it is again:

      <a class="big-btn blue thickbox" href="#TB_inline?height=300&width=500&inlineId=my_big_button_window" title="Big Button Window">My Big Button</a>
      <div id="my_big_button_window">
      <p>Thickbox content goes here.</p>
      </div>

      This has to work, it works on my site.

    16. thumbtak
      Member
      Posted 2 years ago #

      Okay, now it is working. I switched it to iframe. Thanks.

    17. Max Chirkov
      Member
      Plugin Author

      Posted 2 years ago #

      Good. You're welcome!

    Topic Closed

    This topic has been closed to new replies.

    About this Plugin

    About this Topic