WordPress.org

1. thumbtak
   Member
   Posted 4 months 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. maxchirkov
   Member
   Posted 4 months 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.

3. thumbtak
   Member
   Posted 4 months 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.

4. maxchirkov
   Member
   Posted 4 months 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...

5. thumbtak
   Member
   Posted 4 months 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.

6. maxchirkov
   Member
   Posted 4 months ago #

   Can you post a live link to the example above?

7. thumbtak
   Member
   Posted 4 months 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

8. maxchirkov
   Member
   Posted 4 months 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.

9. thumbtak
   Member
   Posted 4 months 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>

10. maxchirkov
    Member
    Posted 4 months 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.

11. thumbtak
    Member
    Posted 4 months ago #

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

12. maxchirkov
    Member
    Posted 4 months 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.

13. thumbtak
    Member
    Posted 4 months ago #

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

14. maxchirkov
    Member
    Posted 4 months ago #

    Good. You're welcome!

Reply

You must log in to post.