[Peter]

Found it ( search for thickbox, as scriptaculous didnt get it ) , just to be sure, I have to disable Javascript Effects Pack and Thickbox and then upload that scriptaculous and enable it ?

Or how is the correct way ?

Thanks.

[twinkiboy]

Originally Posted by cent

Hi,

Check the HTML source in the browser to see if the thickbox.js, jquery.js and thickbox.css are being loaded... if they are there, then the problem might be a conflict with scriptalous. There's a post in I think about what to do or you can try the optimized scriptalous/thickbox replacement also in one of these threads.

What actually makes it work is that the a link for the image has a class='thickbox'.

Best,
Cent

So I checked the source and didn't see the thickbox.js, jquery.js and thickbox.css. Went to admin and removed the Javascript Effects Pack (which removes scriptalous). Tried the site again and now, thickbox works! So I guess it is the conflict with scriptalous that was causing the problem. Thanks for your help.

[cent]

You'll need that javascripts effects pack for private messaging, editing config options in the admin, and I believe on the Sneak page. There might be other places as well.

In order to keep those working, try the optimized scriptalous found in the forums.

You can also modify the thickbox_init.php so that it only loads on the story and index pages and the javascript effects pack to only load for the admin features.

in /modules/thickbox/thickbox_init.php:

change:

PHP Code:

$include_in_pages = array('all'); 


to:

PHP Code:

$include_in_pages = array('story', 'index'); 


This will only include thickbox on the story page and listing page (index). No need to have it running in the browser if its not being used.

For scriptaculous in /modules/scriptaculous/scriptaculous_init.php:

change:

PHP Code:

$do_not_include_in_pages = array(); 


to:

PHP Code:

$do_not_include_in_pages = array('story', 'index'); 


This will prevent it from loading on those 2 pages that Thickbox is being loaded on.

Your mileage may vary. I never actually tried the above, but it should work.

Best,
Cent

Originally Posted by twinkiboy

So I checked the source and didn't see the thickbox.js, jquery.js and thickbox.css. Went to admin and removed the Javascript Effects Pack (which removes scriptalous). Tried the site again and now, thickbox works! So I guess it is the conflict with scriptalous that was causing the problem. Thanks for your help.

[XSP]

Thanks again, cent. It works like a charm!

For anyone following along, I am using Pligg 9.7.0, and this allows you to use thickbox to display a full size image on the 'story' page only, and the thumbnail on the 'upcoming' and 'published' pages links to the story pages instead of offering a full-size image.

modify image_upload_settings.php so that it uses smarty variables. (line 70)

Open link_summary.tpl, and below where you have entered (per default instructions):

PHP Code:

{php}
// START: Image Upload Module
check_actions('image_upload_preview');
// END: Image Upload Module
{/php} 


BELOW add:

PHP Code:

{if $pagename neq "story" && $module_imageupload_image_filename != ''}
<a href="{$story_url}"><img src="{$module_imageupload_thumbnail_src}/{$module_imageupload_image_filename}" /></a>
{/if}
{if $pagename eq "story" && $module_imageupload_image_filename != ''}
<a href="{$my_pligg_base}/images/{$module_imageupload_image_filename}" title="{$module_imageupload_image_caption}" class="thickbox"><img border="1" src="/modules/image_upload/plugins/thumb.php?img={$module_imageupload_image_filename}&w=150&h=150" alt="" /></a><center><span style="font: normal 10px verdana, arial;">(click image to enlarge)</span></center>
{/if} 


[cent]

Hi XSP,

Thanks for providing the community with the tip. Tweaks like this is why I put there is an option for the smarty tags -- good use of them. My way is usually not always the best.

What would be really great is to have a story page that doesn't contain the sidebar column. And then the photo could be placed where the 300x250 ad is on the right side of this Digg page http://www.digg.com/videos/people/Ki...His_Ass_Beaten. In fact, if there wasn't a sidebar column on the page, videos can also play in that 300x250 area as well.

Best,
Cent

Originally Posted by XSP

Thanks again, cent. It works like a charm!

For anyone following along, I am using Pligg 9.7.0, and this allows you to use thickbox to display a full size image on the 'story' page only, and the thumbnail on the 'upcoming' and 'published' pages links to the story pages instead of offering a full-size image.

modify image_upload_settings.php so that it uses smarty variables. (line 70)

Open link_summary.tpl, and below where you have entered (per default instructions):

PHP Code:

{php}
// START: Image Upload Module
check_actions('image_upload_preview');
// END: Image Upload Module
{/php} 


BELOW add:

PHP Code:

{if $pagename neq "story" && $module_imageupload_image_filename != ''}
<a href="{$story_url}"><img src="{$module_imageupload_thumbnail_src}/{$module_imageupload_image_filename}" /></a>
{/if}
{if $pagename eq "story" && $module_imageupload_image_filename != ''}
<a href="{$my_pligg_base}/images/{$module_imageupload_image_filename}" title="{$module_imageupload_image_caption}" class="thickbox"><img border="1" src="/modules/image_upload/plugins/thumb.php?img={$module_imageupload_image_filename}&w=150&h=150" alt="" /></a><center><span style="font: normal 10px verdana, arial;">(click image to enlarge)</span></center>
{/if} 


[XSP]

Nice idea, cent. I sent you a PM with an example. If this is what you are talking about, I'll clean up my edits and post them here.

[XSP]

These edits are an addition to the previous edits I mentioned earlier. At this point on the 'published', 'upcoming' pages if an image upload is available, it shows a thumbnail which links to the story, and only on the story page is thickbox invoked to show the full-size image.

Here are some further edits that will (on the story page) remove the sidebar, present a larger thumbnail, and create a new sidebar below the story section, to the right of the comments.

To preserve your sanity and keep your beer spending within budget, PLEASE BACK UP ANY FILES THAT YOU EDIT BEFORE ATTEMPTING THESE EDITS.

1. In pligg.tpl, find:

PHP Code:

</div><!-- header end --> 


Find:

PHP Code:

</div><!-- wrap end --> 


Delete the content BETWEEN these two lines, and substitute:

PHP Code:

{if $pagename eq "story"}
<!-- STORY PAGE START -->        
 <div id="content-wrap2">  
  <div id="contentbox_story" {if $pagename eq "editor" }style="width:100%;"{/if}>            
   {checkActionsTpl location="tpl_pligg_above_center"}
   {include file=$tpl_center."_mod.tpl"}
   {checkActionsTpl location="tpl_pligg_below_center"}    
 </div><!-- contentbox end -->
</div><!-- content-wrap end --> 
<!-- STORY PAGE END -->
{/if}
{if $pagename neq "story"}
<!-- ALL OTHER PAGES START This section may not be needed, havent tested yet-->
<div id="content-wrap2">  
 <div id="contentbox" {if $pagename eq "editor" }style="width:100%;"{/if}>            
  {checkActionsTpl location="tpl_pligg_above_center"}
  {include file=$tpl_center.".tpl"}
  {checkActionsTpl location="tpl_pligg_below_center"}    
 </div><!-- contentbox end -->
 <div id="sidebar">
  {if $pagename neq "editor"}{include file=$tpl_right_sidebar.".tpl"}{/if}
 </div><!-- sidebar end -->
</div><!-- content-wrap end --> 
<!-- ALL OTHER PAGES END -->
{/if} 


Create a new file in your yget directory called: story_center_mod.tpl

Paste into it:

PHP Code:

{config_load file="/libs/lang.conf"}

{if $enable_show_last_visit neq 0}
 {if $user_id neq 0}
  {if $last_visit neq '0'}
   {#PLIGG_Visual_Story_LastViewed_A#}{$last_visit}{#PLIGG_Visual_Story_LastViewed_B#}<br />
  {else}
   {#PLIGG_Visual_Story_FirstView#}<br />
  {/if}
 {/if}
{/if}
{php}
 Global $db, $main_smarty, $link;
 $link->print_summary();
{/php}
<div id="below_story_wrap">
 <div id="below_story">
  <br/>
   <div id="story_tabs" class="cab">
    <span class="selected"><a href="#" rel="comments">{#PLIGG_Visual_Story_Comments#}</a></span>
    <span><a href="#" rel="who_voted">{#PLIGG_Visual_Story_Who_Voted#}</a></span>
    <span><a href="#" rel="related">{#PLIGG_Visual_Story_RelatedStory#}</a></span>
   </div>
   <div id="navbar" style="margin-left:0px;margin-right:0px"></div>
   <div id="comments" style="display:none">
    <h2>{#PLIGG_Visual_Story_Comments#}</h2>
    {php}
     Global $db, $main_smarty, $current_user, $CommentOrder;
     get_comments();    // the get_comments function is in the /story.php file
    {/php}
    {if $user_authenticated neq ""}
     {include file=$the_template."/comment_form.tpl"}
    {else}
    <br/>
    <div align="center" style="clear:both;margin-left:auto;font-weight:bold;margin-right:auto;border-color:#ccc; border-style:solid; border-width:1px;width:400px;text-align:center; padding-bottom: 8px;">
     <a href="{$login_url}">{#PLIGG_Visual_Story_LoginToComment#}</a> {#PLIGG_Visual_Story_Register#} <a href="{$register_url}">{#PLIGG_Visual_Story_RegisterHere#}</a>.
    </div>
   {/if}
   </div>

<div id="who_voted" style="display:none">
<h2>{#PLIGG_Visual_Story_WhoVoted#}</h2>
<div class="whovotedwrapper" id="idwhovotedwrapper">
<ol>
{section name=nr loop=$voter}
<li>
{if $UseAvatars neq "0"}<img src="{$voter[nr].Avatar_ImgSrc}" alt="Avatar" align="absmiddle"/>{/if} 
<a href = "{$URL_user, $voter[nr].user_login}">{$voter[nr].user_login}</a><br/>
</li>
{/section}
</ol>
</div>
</div>

<div id="related" style="display:none">
<h2>{#PLIGG_Visual_Story_RelatedStory#}</h2>    
<ol>
{section name=nr loop=$related_story}
<li><a href = "{$related_title_url}{$related_story[nr].link_title_url}">{$related_story[nr].link_title}</a><br/></li>
{/section}
</ol>

</div>

{literal}
<script type="text/javascript">
initializetabcontent("story_tabs")
</script>
{/literal}


{php}
?>
<style type="text/css">
  /* allow room for 3 columns */
  div#idwhovotedwrapper ol {width: 35em; list-style-type: none; }
  div#idwhovotedwrapper ol li {float: left; width: 10em; }
  div#idwhovotedwrapper br { clear: left; }
  div#idwhovotedwrapper div.whovotedwrapper { margin-bottom: 1em; }
</style>

</div> <!--END below_story -->
<div id="below_story_sidebar">
    This is a div that can be used for some sidebar content. Ideally, It can be used for adsense or some other kind of advertising.
</div>
</div><!--END below_story_wrap -->

<?php
{/php}

In link_summary.tpl, Find where the image upload info is (smarty vars have to be enabled):

PHP Code:

{php}
// START: Image Upload Module
check_actions('image_upload_preview');
// END: Image Upload Module
{/php} 


AFTER add:

PHP Code:

{if $pagename neq "story" && $module_imageupload_image_filename != ''}
<div width="100" class="imgleft">
<a href="{$story_url}"><img src="{$module_imageupload_thumbnail_src}/{$module_imageupload_image_filename}" /></a>
</div>
{/if}
{if $pagename eq "story" && $module_imageupload_image_filename != ''}
<div style="width: 300px; margin: 5px 10px 10px 10px; float:right;"><a href="{$my_pligg_base}/images/{$module_imageupload_image_filename}" title="{$module_imageupload_image_caption}" class="thickbox"><img border="1" src="/modules/image_upload/plugins/thumb.php?img={$module_imageupload_image_filename}&w=300&h=300" alt="" /></a><center><span style="font: normal 10px verdana, arial;">(click image to enlarge)</span></center></div>
{/if} 


In main.css, in the wrappers section, add:

#contentbox_story {width:100%;}
#below_story_wrap {}
#below_story {margin-right:10px; float:left; width:75%;}
#below_story_sidebar {width:20%; float:left;}

That should be it.

[XSP]

Cent, I have made another discovery: Since I modded the scriptaculous_init.php to not load on the story page, thickbox works as expected, but the tabs for the 'comments', 'who voted', etc do not work! Have you noticed this? Is there a workaround?

[XSP]

If you have been following along and have made the previous edits, here is a quick and easy way to add a default ad (or something) to the right side of the story page when there is not an image uploaded:

Open link_summary.tpl, and FIND (remember, this is only if you have completed the other edits):

PHP Code:

{if $pagename eq "story" && $module_imageupload_image_filename != ''}
<div style="width: 200px; margin: 5px 10px 10px 10px; float:right;"><a href="{$my_pligg_base}/images/{$module_imageupload_image_filename}" title="{$module_imageupload_image_caption}" class="thickbox"><img border="1" src="/modules/image_upload/plugins/thumb.php?img={$module_imageupload_image_filename}&w=200&h=200" alt="" /></a><center><span style="font: normal 10px verdana, arial;">(click image to enlarge)</span></center></div>
{/if} 


AFTER add:

PHP Code:

{if $pagename eq "story" && $module_imageupload_image_filename eq ''}
<div style="width: 200px; height:200px; margin: 5px 10px 10px 10px; float:right; border:#9ACD34 medium solid;">Nice Ad here</div>
{/if} 


Be sure to change the border color to a color that suits your site, and modify the CSS to accommodate your 'default' content.

If anyone else is using these, I would love to see your use of it or if you have additional ideas.

[Peter]

Originally Posted by XSP

Cent, I have made another discovery: Since I modded the scriptaculous_init.php to not load on the story page, thickbox works as expected, but the tabs for the 'comments', 'who voted', etc do not work! Have you noticed this? Is there a workaround?

The same here, tabs are gone and allowing scriptaculous in story, makes the image go to a blank page.

Is there a solution to make thickbox and scriptaculous compatible ?

Also when a user save an image, and you go to the saved stories, thickbox goes to a blank page and some other places too, because scriptaculous is active there.

Any help is very apreciated.

Thanks.