Archive for myfreeforum.org Before posting please check the "stickies" in the support forums.
Please ask questions in real English and not "txt". You will get a better response.
Please do not ask support questions via PMs.
 


       myfreeforum.org Forum Index -> Portal components
danm97

Better cosmetic for your gallery

This walkthrough is for a better cosmetic for the gallery.

First you will need those 3 scripts on differents js pages.

Create a new js page in your webtemplates
(admin panel, 6-webpages, edit templates, click edit "your main template", create a new javascript page)
and put this script and name it prototype.js
http://freeforallpoker.net/webtemplates/Main/prototype.js
(This link makes you download the script in your documents.)

the 2nd script cant be added in our templates (well tried but no success) so we will use the source for the script.
http://www.lokeshdhakar.com/proje...ptaculous.js?load=effects,builder

The 3rd script need to be add to your forum templates
(admin panel, 3-styles, edit templates/logos, myfu_yourtemplate...
 "Choose Forum template/javascript/css File to Edit" myfu_yourtemplate.js1)
and put this script
http://freeforallpoker.net/templa...llpoker1/myfu_freeforallpoker2.js
(This link makes you download the script in your documents.)

Note: within this script you will need to edit 2 imgs...
Near the top you will see those codes..
Code:
//
//  Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'http://freeforallpoker.net/templates/myfu_freeforallpoker1/images/loading.gif',    
    fileBottomNavCloseImage: 'http://freeforallpoker.net/templates/myfu_freeforallpoker1/images/Close_icon.png',

http://freeforallpoker.net/templa...eeforallpoker1/images/loading.gif = the loading img.
http://freeforallpoker.net/templa...orallpoker1/images/Close_icon.png = the close window button

You need to change those imgs to your images links.



Then you need to edit your CSS, it can be in your overall header or in your forum template main css.

at the bottom add..
Spoiler:

Code:
#lightbox{   position: absolute;   left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #000000; width: 250px; height: 250px; margin: 0 auto;  min-width:200px; min-height:100px;}
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; min-height:100px;}
#nextLink { right: 0; float: right; min-height:100px;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://freeforallpoker.net/templates/myfu_freeforallpoker1/images/prev.png) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://freeforallpoker.net/templates/myfu_freeforallpoker1/images/next.png) right 15% no-repeat; }

#imageDataContainer{ font: 10px Georgia; background-color: #000000; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ;  min-width:200px;}

#imageData{   padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}       

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


Note: you will need to change the 2 imgs inside those codes..
Code:
url(/templates/myfu_freeforallpoker1/images/prev.png) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/templates/myfu_freeforallpoker1/images/next.png) right 15% no-repeat; }

/templates/myfu_freeforallpoker1/images/prev.png = the previous button.
/templates/myfu_freeforallpoker1/images/next.png = the next button.
Replace those 2 imgs to your own imgs links.



Now you need to edit your cms_gallery.tpl
(admin panel, 3-styles, edit templates/logos, myff_yourtemplate, "Choose Portal template File to Edit" cms_gallery.tpl)

You will find this part of your codes...
Spoiler:

Code:
<!-- IF S_GALLERY_SHOWIMAGES -->
<!-- IF S_GALLERY_MODE == "IMAGES" -->
<form action="{U_GALLERY_ACTION}"  method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!-- BEGIN switch_gallery_title -->      
   <tr>
        <th  colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
      
        
     </table>
     <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!-- END switch_gallery_title -->          
  <!-- BEGIN gallery_row -->
  <tr>
   <!-- BEGIN gallery_column -->
   <td class="row1" align="center" valign="center"><span class="topictitle"><a href="{gallery_row.gallery_column.THUMBNAIL_URL}" >{gallery_row.gallery_column.THUMBNAIL}</a></span></td>
  
   <!-- END gallery_column -->
    </tr>
  <!-- END gallery_row -->
  <td align="right"><span class="topictitle">{GALLERY_PAGINATION}</span></td>
     </tr>
</table>
</form>

<!-- ENDIF -->
<!-- ENDIF -->



replace all the above with this...

Spoiler:

Code:
<!-- IF S_GALLERY_SHOWIMAGES -->
<!-- IF S_GALLERY_MODE == "IMAGES" -->
<form action="{U_GALLERY_ACTION}"  method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="0" cellspacing="1" border="0" align="center">
<!-- BEGIN switch_gallery_title -->     
   <tr>
        <th  colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
     <tr>
         <td><span class="gensmall">{L_GALLERY_ORDER}{GALLERY_ORDERING}</span></td>
        <td align="right" class="gensmall" rowspan="2">{GALLERY_PAGINATION}</td>
</tr><tr>
        <td class="gensmall">{L_GALLERY_FILTER}<input name="filter" value={GALLERY_FILTER}><input type="submit" name="go" value="Go" class="button butshade"></input></td>


        </tr>
     </table>
     <table width="100%" cellpadding="0" cellspacing="1" border="0" align="center">
<!-- END switch_gallery_title -->          
  <!-- BEGIN gallery_row -->
  <tr>
   <!-- BEGIN gallery_column -->
   <td align="center" valign="center" class="row11"><a href="{gallery_row.gallery_column.FULL_IMG}" rel='lightbox[freeforall]' title="{gallery_row.gallery_column.FILENAME}<br />Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a></td>

   <!-- END gallery_column -->

    </tr>
  <!-- END gallery_row -->
<td><td>
        <td align="right" class="gensmall" colspan="5">{GALLERY_PAGINATION}

<script type="text/javascript" src="http://freeforallpoker.net/webtemplates/Main/prototype.js"></script>
<script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/templates/myfu_freeforallpoker1/myfu_freeforallpoker2.js"></script></td>

</table>

</form>

<!-- ENDIF -->
<!-- ENDIF -->



Note: you need to change the script pages (src) in the above codes with the script pages link you created earlier.
*******The 3 script in the above codes must be kept in the same order !!! Or nothing will work ******

And thats it your done !! you have an awesome gallery display !!
Enjoy !! If you like this please join my site or link me !!
danm97

Edit !!

I forgot to change some class for the cms_gallery.tpl and I had 2 table errors

Here are the proper codes....

Code:
<!-- IF S_GALLERY_SHOWIMAGES -->
<!-- IF S_GALLERY_MODE == "IMAGES" -->
<form action="{U_GALLERY_ACTION}"  method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="0" cellspacing="1" border="0" align="center">
<!-- BEGIN switch_gallery_title -->      
   <tr>
        <th  colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
     <tr>
         <td><span class="gensmall">{L_GALLERY_ORDER}{GALLERY_ORDERING}</span></td>
        <td align="right" class="gensmall" rowspan="2">{GALLERY_PAGINATION}</td>
</tr><tr>
        <td class="gensmall">{L_GALLERY_FILTER}<input name="filter" value={GALLERY_FILTER}><input type="submit" name="go" value="Go" class="mainoption"></input></td>


        </tr>
     </table>
     <table width="100%" cellpadding="0" cellspacing="1" border="0" align="center">
<!-- END switch_gallery_title -->          
  <!-- BEGIN gallery_row -->
  <tr>
   <!-- BEGIN gallery_column -->
   <td align="center" valign="center" class="row"><a href="{gallery_row.gallery_column.FULL_IMG}" rel='lightbox[freeforall]' title="{gallery_row.gallery_column.FILENAME}<br />Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a></td>

   <!-- END gallery_column -->

    </tr>
  <!-- END gallery_row -->
<tr>
        <td align="right" class="gensmall" colspan="5">{GALLERY_PAGINATION}

<script type="text/javascript" src="http://freeforallpoker.net/webtemplates/Main/prototype.js"></script>
<script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/templates/myfu_freeforallpoker1/myfu_freeforallpoker2.js"></script></td>
</tr>
</table>

</form>

<!-- ENDIF -->
<!-- ENDIF -->
Ask Mr. Religion

This bit:

Code:
<br />Posted by


Has an extraneous
Code:
<br />
that appears in the hovering over the gallery image that can be deleted and replaced with a leading space. The mouse hover over the image then looks clean.

Until I am more confident with javascript, I opted to not implement the lightbox features. I did implement the new macros and tailored things for my forum's subsilver cms_gallery.tpl template:

Code:
<form action="{U_GALLERY_ACTION}" method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--BEGIN switch_gallery_title -->    
   <tr>
  <th colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
    </tr>
    <tr>
     <td class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_ORDER}{GALLERY_ORDERING}</span></td>

  <td class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_FILTER}<input name="filter" value={GALLERY_FILTER}><input type="submit" name="go" value="Go"></span></td>
  <td align="right" bgcolor="#FFFF00"><span class="topictitle">{GALLERY_PAGINATION}</span></td>
    </tr>
    </table>
    <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--END switch_galley_title -->        
 <!-- BEGIN gallery_row -->
 <tr>
   <!-- BEGIN gallery_column -->
   <td class="row11" align="center" valign="center" bgcolor="#FFFF00"><span class="topictitle"><a href="{gallery_row.gallery_column.FULL_IMG}" title="{gallery_row.gallery_column.FILENAME} Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a></td>
 
  <!-- END gallery_column -->
  </tr>
 <!-- END gallery_row -->
</table>
</form>


Nice. Guest access enabled for now so you can see the end result:

http://rti.myfineforum.org/index.php?component=gallery

AMR
danm97

Ask Mr. Religion wrote:
This bit:

Code:
<br />Posted by


Has an extraneous
Code:
<br />
that appears in the hovering over the gallery image that can be deleted and replaced with a leading space. The mouse hover over the image then looks clean.

Nice. Guest access enabled for now so you can see the end result:

http://rti.myfineforum.org/index.php?component=gallery

AMR


The br is used for the look on the lightbox the hovering effect (title) is not realy important in my view since this feature was made for the lightbox effect.

Guests cant see any image on your gallery.
Ask Mr. Religion

danm97 wrote:


Guests cant see any image on your gallery.
Try again. I was bit by the "click on update portal parameters" multiple times issue.  

AMR
danm97

It work now but when clicking on the imgs you land on the page link of the img if you dont use the scripts...

A bit useless if you ask me... if you dont want to use the script maybe you should comeback to the original landing page for the imgs.

Code:
href="{gallery_row.gallery_column.THUMBNAIL_URL}"


With this you dont land on a big white page with a img on the top left.
And your members stay on the site.
Ask Mr. Religion

danm97 wrote:
It work now but when clicking on the imgs you land on the page link of the img if you dont use the scripts...

A bit useless if you ask me... if you dont want to use the script maybe you should comeback to the original landing page for the imgs.

Code:
href="{gallery_row.gallery_column.THUMBNAIL_URL}"


With this you dont land on a big white page with a img on the top left.
And your members stay on the site.
Good point. Where do I insert this? Are you sure this is a macro that lands on the original post of the image?

AMR
danm97

Change this part...

Code:
 {gallery_row.gallery_column.FULL_IMG}


To this...

Code:
 {gallery_row.gallery_column.THUMBNAIL_URL}


and no it will not land on the original post of the img... dont think its possible.
Ask Mr. Religion

danm97 wrote:
Change this part...

Code:
 {gallery_row.gallery_column.FULL_IMG}


To this...

Code:
 {gallery_row.gallery_column.THUMBNAIL_URL}


and no it will not land on the original post of the img... dont think its possible.
I tried that before my last post. Get nothing. You can see the effects at the site.

http://rti.myfineforum.org/index.php?component=gallery

Clicking an image yields a blank gallery page.

AMR
danm97

Now thats just weird cuz its the original gallery link  
Ask Mr. Religion

danm97 wrote:
Now thats just weird cuz its the original gallery link
Where did you discover this particular macro? I have not run across it. What template?

EDIT: Found it in gallery_latest.tpl

Code:
{gallerylatest_row.gallerylatest_column.THUMBNAIL_URL}


AMR
danm97

Its in the original cms_gallery.tpl
Ask Mr. Religion

danm97 wrote:
Its in the original cms_gallery.tpl
The template must have morphed over time as I don't have it in my version.

EDIT: Replaced my cms_gallery.tpl with the original quoted in your how to do it post above. Get the same result, that is, a blank gallery page when selecting any gallery image. That THUMBNAIL_URL macro bit must no longer function...at least on my site, that is. Wink

AMR
danm97

Must be something on your site... tested it on mine and it works perfecly.
Ask Mr. Religion

danm97 wrote:
Must be something on your site... tested it on mine and it works perfecly.
Thanks. I don't doubt it as I have tweaked all the templates and have probably fumble-fingered something. I will have to research this more.

AMR
danm97

Just thought of this...

If you use this lightbox you cant go in the img file and see the details.
So admins cant delete or edit the offensive imgs.

I will try to think of a way to fix this.

One thing for sure the macros {gallery_row.gallery_column.THUMBNAIL_URL} must be added somewhere. Not on the gallery itself cuz I want members to click on the img. so a button under all imgs on the gallery is not what I want.

Will work on the script itself to add this part on the lightbox.  Not on the title descition cuz it will add too much codes to the text when you hover the img.

Let see what I come up with tomorow, its late now.
Zudane

Just brainstorming... the same spot for the full view could do it with an option for admin/mods or have a separate page for admin/mod editing, such as one that shows the thumbnail with the edit/remove buttons.
danm97

Zudane wrote:
Just brainstorming... the same spot for the full view could do it with an option for admin/mods or have a separate page for admin/mod editing, such as one that shows the thumbnail with the edit/remove buttons.


Tried to add a button to the fadein img window but no success. the codes are very advanced and to add a div inside you have to edit multiple things. I havent all that need to be edit... yet. googled alo on the subject but seems im the only one who realy want to add a div to this feature.

A second page would be an option but I like having all in one place.


For now I took the simpliest way to be abble to edit the gallery imgs....

in the cms_gallery.tpl after...

Code:
  <td align="center" valign="center" class="row11"><a href="{gallery_row.gallery_column.FULL_IMG}" rel='lightbox[freeforall]' title="{gallery_row.gallery_column.FILENAME}<br />Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a>


I added...

Code:
<!-- IF S_USER_LEVEL > 0 -->
<br />
 <a href="{gallery_row.gallery_column.THUMBNAIL_URL}"><img src="http://freeforallpoker.net/templates/myfu_freeforallpoker1/images/lang_english/icon_edit.gif" alt=""/></a>
<!-- ENDIF -->


The switch (IF S_USER_LEVEL > 0) makes this button viewable only by admins/mods.
Zudane

Well stated, mind showing a screenshot to see how it shows up for admins/mods?
danm97

It looks like this...
Spoiler:



Still not what I exactly want but it does the job for now.
danm97

Ask Mr. Religion wrote:
danm97 wrote:
Change this part...

Code:
 {gallery_row.gallery_column.FULL_IMG}


To this...

Code:
 {gallery_row.gallery_column.THUMBNAIL_URL}


and no it will not land on the original post of the img... dont think its possible.
I tried that before my last post. Get nothing. You can see the effects at the site.

http://rti.myfineforum.org/index.php?component=gallery

Clicking an image yields a blank gallery page.

AMR


It just jumped to my mind !!

You miss lots of codes inside your cms_gallery.tpl... Could you post the whole codes you got in this template ??
Ask Mr. Religion

danm97 wrote:
Ask Mr. Religion wrote:
danm97 wrote:
Change this part...

Code:
 {gallery_row.gallery_column.FULL_IMG}


To this...

Code:
 {gallery_row.gallery_column.THUMBNAIL_URL}


and no it will not land on the original post of the img... dont think its possible.
I tried that before my last post. Get nothing. You can see the effects at the site.

http://rti.myfineforum.org/index.php?component=gallery

Clicking an image yields a blank gallery page.

AMR


It just jumped to my mind !!

You miss lots of codes inside your cms_gallery.tpl... Could you post the whole codes you got in this template ??


Code:
<form action="{U_GALLERY_ACTION}"  method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--BEGIN switch_gallery_title -->     
   <tr>
        <th  colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
     <tr>
         <td  class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_ORDER}{GALLERY_ORDERING}</span></td>

        <td  class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_FILTER}<input name="filter" value={GALLERY_FILTER}><input type="submit" name="go" value="Go"></span></td>
        <td align="right" bgcolor="#FFFF00"><span class="topictitle">{GALLERY_PAGINATION}</span></td>
     </tr>
     </table>
     <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--END switch_galley_title -->          
  <!-- BEGIN gallery_row -->
  <tr>
   <!-- BEGIN gallery_column -->
   <td class="row11" align="center" valign="center" bgcolor="#FFFF00"><span class="topictitle"><a href="{gallery_row.gallery_column.FULL_IMG}" title="{gallery_row.gallery_column.FILENAME} Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a></td>
 
   <!-- END gallery_column -->
    </tr>
  <!-- END gallery_row -->
</table>
</form>


AMR
danm97

Thats what I thought... you miss loads of coding in there.

Give me a moment and will try to fix it for you.
danm97

Try this let see what you get...

Spoiler:

Code:
<script>
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>

  
<!-- IF S_GALLERY_SHOWIMAGES -->
<!-- IF S_GALLERY_MODE == "IMAGES" -->

<form action="{U_GALLERY_ACTION}"  method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--BEGIN switch_gallery_title -->      
   <tr>
        <th  colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
     <tr>
         <td  class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_ORDER}{GALLERY_ORDERING}</span></td>

        <td  class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_FILTER}<input name="filter" value={GALLERY_FILTER}><input type="submit" name="go" value="Go"></span></td>
        <td align="right" bgcolor="#FFFF00"><span class="topictitle">{GALLERY_PAGINATION}</span></td>
     </tr>
     </table>
     <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--END switch_galley_title -->          
  <!-- BEGIN gallery_row -->
  <tr>
   <!-- BEGIN gallery_column -->
   <td class="row11" align="center" valign="center" bgcolor="#FFFF00"><span class="topictitle"><a href="{gallery_row.gallery_column.THUMBNAIL_URL}" title="{gallery_row.gallery_column.FILENAME} Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a></td>
  
   <!-- END gallery_column -->
    </tr>
  <!-- END gallery_row -->
</table>
</form>


<!-- ENDIF -->
<!-- ENDIF -->






<!-- IF S_GALLERY_MODE == "IMAGE" -->


<!-- BEGIN switch_gallery_title -->      

<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">

   <tr>
        <th  class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
     </table>
<!-- END switch_gallery_title -->          
     <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
      <tr>
    
   <td class="row2" colspan="2"><span class="topictitle"><a href="{U_GALLERY_IMAGE_RETURN}" >{L_GALLERY_IMAGE_RETURN}</a></span></td>
  
    </tr>

  <tr>
    
   <td class="row2" colspan="2"><span class="topictitle"><a href="{GALLERY_IMAGE_URL}" >{GALLERY_IMAGE}</a></span></td>
  
    </tr>
    <tr>
     <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_DESCRIPTION}</span></td>
<!-- BEGIN switch_gallery_edit -->  
    <form action="{U_GALLERY_ACTION}" method="post">{S_GALLERY_HIDDEN_FIELDS}
    <td class="row2"><span class="topictitle"><textarea name="description" style="width: 500px;height=100px;">{GALLERY_IMAGE_DESCRIPTION}</textarea></span></td>
<!-- END switch_gallery_edit -->  
<!-- BEGIN switch_gallery_noedit -->  
    <td class="row2"><span class="topictitle">{GALLERY_IMAGE_DESCRIPTION}</span></td>
<!-- END switch_gallery_noedit -->  
    
    </tr>
  
    
    
     <tr>
  
    <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_VIEWS}</span></td>
    <td class="row2"><span class="topictitle">{GALLERY_IMAGE_VIEWS}</span></td>
  
    
    </tr>
  
  


    </form>

  
</table>


<!-- ENDIF -->

Zudane

That actually does look fine to me, although the edit button may be something you will want to change to fit the style better.  But overall I think the edit button looks good.

And always grateful for the assistance with sharing this wonderful idea!
danm97

I still could make the edit button a (input type=button) to look just like the "GO" button at the top.

Actualy thats what I will do. But again this will be temporaly since I realy want the button to be inside the lightbox.

Will post the codes for the new button in a few mins.
danm97

Here's the new codes for the edit buttons...

Code:
<!-- IF S_USER_LEVEL > 0 -->
<br />

<input type="button" value="Edit" style="font-size:10px;padding: .1em 1em .2em;" class="mainoption" onclick="location.href='{gallery_row.gallery_column.THUMBNAIL_URL}'"/>
<!-- ENDIF -->


It use the class mainoption which is used in most templates on myff.

Here's the new look of the button....
Spoiler:



If you want to change the colors of your button you will have to edit input.mainoption in your css.
Ask Mr. Religion

danm97 wrote:
Try this let see what you get...

Spoiler:

Code:
<script>
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>

 
<!-- IF S_GALLERY_SHOWIMAGES -->
<!-- IF S_GALLERY_MODE == "IMAGES" -->

<form action="{U_GALLERY_ACTION}" method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--BEGIN switch_gallery_title -->
  <tr>
  <th colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
  </tr>
  <tr>
  <td class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_ORDER}{GALLERY_ORDERING}</span></td>

  <td class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_FILTER}<input name="filter" value={GALLERY_FILTER}><input type="submit" name="go" value="Go"></span></td>
  <td align="right" bgcolor="#FFFF00"><span class="topictitle">{GALLERY_PAGINATION}</span></td>
  </tr>
  </table>
  <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--END switch_galley_title -->
 <!-- BEGIN gallery_row -->
 <tr>
  <!-- BEGIN gallery_column -->
  <td class="row11" align="center" valign="center" bgcolor="#FFFF00"><span class="topictitle"><a href="{gallery_row.gallery_column.THUMBNAIL_URL}" title="{gallery_row.gallery_column.FILENAME} Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a></td>
 
  <!-- END gallery_column -->
  </tr>
 <!-- END gallery_row -->
</table>
</form>


<!-- ENDIF -->
<!-- ENDIF -->






<!-- IF S_GALLERY_MODE == "IMAGE" -->


<!-- BEGIN switch_gallery_title -->

<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">

  <tr>
  <th class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
  </tr>
  </table>
<!-- END switch_gallery_title -->
  <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
  <tr>
 
  <td class="row2" colspan="2"><span class="topictitle"><a href="{U_GALLERY_IMAGE_RETURN}" >{L_GALLERY_IMAGE_RETURN}</a></span></td>
 
  </tr>

 <tr>
 
  <td class="row2" colspan="2"><span class="topictitle"><a href="{GALLERY_IMAGE_URL}" >{GALLERY_IMAGE}</a></span></td>
 
  </tr>
  <tr>
  <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_DESCRIPTION}</span></td>
<!-- BEGIN switch_gallery_edit -->
  <form action="{U_GALLERY_ACTION}" method="post">{S_GALLERY_HIDDEN_FIELDS}
  <td class="row2"><span class="topictitle"><textarea name="description" style="width: 500px;height=100px;">{GALLERY_IMAGE_DESCRIPTION}</textarea></span></td>
<!-- END switch_gallery_edit -->
<!-- BEGIN switch_gallery_noedit -->
  <td class="row2"><span class="topictitle">{GALLERY_IMAGE_DESCRIPTION}</span></td>
<!-- END switch_gallery_noedit -->
 
  </tr>
 
 
 
  <tr>
 
  <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_VIEWS}</span></td>
  <td class="row2"><span class="topictitle">{GALLERY_IMAGE_VIEWS}</span></td>
 
 
  </tr>
 
 


  </form>

 
</table>


<!-- ENDIF -->

That was swell! Worked just fine.

AMR
danm97

You can have more options to this new page... like...

Filename:
File size:
Posted by
To post on forum use:
To post thumbnail on forum use:
Edit and delete button.
If you want them added just tell me.
Ask Mr. Religion

danm97 wrote:
You can have more options to this new page... like...

Filename:
File size:
Posted by
To post on forum use:
To post thumbnail on forum use:
Edit and delete button.
If you want them added just tell me.
I want only the delete function. That said, deleting an item in the gallery leaves me with a post somewhere with a missing item. I do not allow uploads to the gallery unless they are included in a normal forum post. What I really need is a link to the post where the gallery image was attached. That way when I delete a gallery image I can then delete the corresponding post or at least edit it accordingly.

AMR
danm97

Add this...
Code:
<!-- BEGIN switch_gallery_edit -->  
      <tr>
  
    <td align="center"><span><input type="submit" name="save" value="Save" class="button butshade"></input></span>
     <span><input type="submit" name="delete" value="Delete" class="button butshade"></input></span></td>
  
    </tr>
<!-- END switch_gallery_edit -->


After this part of your codes...

Code:
    <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_VIEWS}</span></td>
    <td class="row2"><span class="topictitle">{GALLERY_IMAGE_VIEWS}</span></td>
  
    
    </tr>


Try it and tell me if it worked
Zudane

I like the location of the edit button, personally, can always zoom in for a better view if needed.
danm97

Zudane wrote:
I like the location of the edit button, personally, can always zoom in for a better view if needed.


Zoom ?? why zooming would be needed ??
You click on the pic and it comes in the lightbox at full scale.
Ask Mr. Religion

danm97 wrote:
Add this...
Code:
<!-- BEGIN switch_gallery_edit -->
  <tr>
 
  <td align="center"><span><input type="submit" name="save" value="Save" class="button butshade"></input></span>
  <span><input type="submit" name="delete" value="Delete" class="button butshade"></input></span></td>
 
  </tr>
<!-- END switch_gallery_edit -->


After this part of your codes...

Code:
  <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_VIEWS}</span></td>
  <td class="row2"><span class="topictitle">{GALLERY_IMAGE_VIEWS}</span></td>
 
 
  </tr>


Try it and tell me if it worked
I added the codes you suggest along with a switch to allow only mods and above to save or delete images, the cms_gallery.tpl now is as follows:

Code:

<script>
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>

  
<!-- IF S_GALLERY_SHOWIMAGES -->
<!-- IF S_GALLERY_MODE == "IMAGES" -->

<form action="{U_GALLERY_ACTION}"  method="GET" onchange="forms[\'galleryform\'].submit()" name="galleryform">{S_GALLERY_HIDDEN}
<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--BEGIN switch_gallery_title -->      
   <tr>
        <th  colspan="3" class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
     <tr>
         <td  class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_ORDER}{GALLERY_ORDERING}</span></td>

        <td  class="thTop" nowrap="nowrap" bgcolor="#FFFF00"><span class="topictitle">{L_GALLERY_FILTER}<input name="filter" value={GALLERY_FILTER}><input type="submit" name="go" value="Go"></span></td>
        <td align="right" bgcolor="#FFFF00"><span class="topictitle">{GALLERY_PAGINATION}</span></td>
     </tr>
     </table>
     <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
<!--END switch_galley_title -->          
  <!-- BEGIN gallery_row -->
  <tr>
   <!-- BEGIN gallery_column -->
   <td class="row11" align="center" valign="center" bgcolor="#FFFF00"><span class="topictitle"><a href="{gallery_row.gallery_column.THUMBNAIL_URL}" title="{gallery_row.gallery_column.FILENAME} Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</a></td>
  
   <!-- END gallery_column -->
    </tr>
  <!-- END gallery_row -->
</table>
</form>


<!-- ENDIF -->
<!-- ENDIF -->






<!-- IF S_GALLERY_MODE == "IMAGE" -->


<!-- BEGIN switch_gallery_title -->      

<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">

   <tr>
        <th  class="thTop" nowrap="nowrap">{GALLERY_TITLE}</th>
     </tr>
     </table>
<!-- END switch_gallery_title -->          
     <table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
      <tr>
    
   <td class="row2" colspan="2"><span class="topictitle"><a href="{U_GALLERY_IMAGE_RETURN}" >{L_GALLERY_IMAGE_RETURN}</a></span></td>
  
    </tr>

  <tr>
    
   <td class="row2" colspan="2"><span class="topictitle"><a href="{GALLERY_IMAGE_URL}" >{GALLERY_IMAGE}</a></span></td>
  
    </tr>
    <tr>
     <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_DESCRIPTION}</span></td>
<!-- BEGIN switch_gallery_edit -->  
    <form action="{U_GALLERY_ACTION}" method="post">{S_GALLERY_HIDDEN_FIELDS}
    <td class="row2"><span class="topictitle"><textarea name="description" style="width: 500px;height=100px;">{GALLERY_IMAGE_DESCRIPTION}</textarea></span></td>
<!-- END switch_gallery_edit -->  
<!-- BEGIN switch_gallery_noedit -->  
    <td class="row2"><span class="topictitle">{GALLERY_IMAGE_DESCRIPTION}</span></td>
<!-- END switch_gallery_noedit -->  
    
    </tr>
  
    
    
     <tr>
  
    <td class="row2"><span class="topictitle">{L_GALLERY_IMAGE_VIEWS}</span></td>
    <td class="row2"><span class="topictitle">{GALLERY_IMAGE_VIEWS}</span></td>
  
    
    </tr>


 <!-- IF S_USER_LEVEL > 0 -->  
 <!-- BEGIN switch_gallery_edit -->  
      <tr>
  
    <td align="center"><span><input type="submit" name="save" value="Save" class="button butshade"></input></span>
     <span><input type="submit" name="delete" value="Delete" class="button butshade"></input></span></td>
  
    </tr>


<!-- END switch_gallery_edit -->  
<!-- ENDIF -->

    </form>

  
</table>


<!-- ENDIF -->



Still have the gnarly issue that deleting a gallery image means the image attached to a post is now a dead link. Is there a way to have gallery images linked to the the original post that these images were attached to in the first place?

BTW, using the spoiler tags for the code above in this post results in a bizarre format of the post, so I had to use the code tags. What is it about the code that causes the spoiler tag error? The script bit, perhaps?

AMR
Zudane

Not really a way right now... possibly could be added, but I think that would be a bit too much work.
danm97

Quote:
I added the codes you suggest along with a switch to allow only mods and above to save or delete images, the cms_gallery.tpl now is as follows


You didnt need to add the mod switch, the galery edit switch do already this job.
Ask Mr. Religion

danm97 wrote:
Quote:
I added the codes you suggest along with a switch to allow only mods and above to save or delete images, the cms_gallery.tpl now is as follows


You didnt need to add the mod switch, the galery edit switch do already this job.
Where is this? The gallery portal has no option for this.

AMR
danm97

you have it in the codes I gave you...

Code:
<!-- BEGIN switch_gallery_edit -->  
      <tr>
  
    <td align="center"><span><input type="submit" name="save" value="Save" class="button butshade"></input></span>
     <span><input type="submit" name="delete" value="Delete" class="button butshade"></input></span></td>
  
    </tr>


<!-- END switch_gallery_edit -->  
Ask Mr. Religion

danm97 wrote:
you have it in the codes I gave you...

Code:
<!-- BEGIN switch_gallery_edit -->
  <tr>
 
  <td align="center"><span><input type="submit" name="save" value="Save" class="button butshade"></input></span>
  <span><input type="submit" name="delete" value="Delete" class="button butshade"></input></span></td>
 
  </tr>


<!-- END switch_gallery_edit -->
Yup, confirmed it so. How is it one can determine the code above is exclusive to mods and admins?

AMR
danm97

It has more function to it but it acts like a mod/admin switch yes.
danm97

You can now add the image description in the hover title on the gallery images..

In the part of your codes that look like this...
Code:
<a href="{gallery_row.gallery_column.FULL_IMG}" rel='lightbox[freeforall]' title="{gallery_row.gallery_column.FILENAME}<br />Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</img></a>

(That's if you followed the walkthrough of this thread.)

You can now add {gallery_row.gallery_column.DESCRIPTION}

There's many ways to play with the title of the image...
The fileanem of the img = {gallery_row.gallery_column.FILENAME}
The img was uploaded by (username) = {gallery_row.gallery_column.POSTER}
The description of the image when the user uploaded it = {gallery_row.gallery_column.DESCRIPTION}
**If no descripton was posted at the upload, you can always edit the img file as moderator in the gallery.

You put which ever you want inside this part of your codes...
Code:
 title="{the macros you want}"


You can put all 3 of them if you like.

I made a second gallery on my site, made with only poker pictures, see here http://freeforallpoker.net/pokergallery.html

On this gallery I only put the img description since this gallery shows only imgs uploaded by the username "editor". I little trick if you want to have a specific gallery.

On my main gallery as posted in previous post http://freeforallpoker.net/gallery.html
You can see its all the imgs uploaded by all the members. So I've put the filename and the poster's name, I think thats the more relevant infos there since most people wont take the time to put a description to their imgs.

If you have any questions I will keep on giving support on the gallery here
Ask Mr. Religion

danm97 wrote:
You can now add the image description in the hover title on the gallery images..

In the part of your codes that look like this...
Code:
<a href="{gallery_row.gallery_column.FULL_IMG}" rel='lightbox[freeforall]' title="{gallery_row.gallery_column.FILENAME}<br />Posted by {gallery_row.gallery_column.POSTER}">{gallery_row.gallery_column.THUMBNAIL}</img></a>

(That's if you followed the walkthrough of this thread.)

You can now add {gallery_row.gallery_column.DESCRIPTION}

There's many ways to play with the title of the image...
The fileanem of the img = {gallery_row.gallery_column.FILENAME}
The img was uploaded by (username) = {gallery_row.gallery_column.POSTER}
The description of the image when the user uploaded it = {gallery_row.gallery_column.DESCRIPTION}
**If no descripton was posted at the upload, you can always edit the img file as moderator in the gallery.

You put which ever you want inside this part of your codes...
Code:
 title="{the macros you want}"


You can put all 3 of them if you like.

I made a second gallery on my site, made with only poker pictures, see here http://freeforallpoker.net/pokergallery.html

On this gallery I only put the img description since this gallery shows only imgs uploaded by the username "editor". I little trick if you want to have a specific gallery.

On my main gallery as posted in previous post http://freeforallpoker.net/gallery.html
You can see its all the imgs uploaded by all the members. So I've put the filename and the poster's name, I think thats the more relevant infos there since most people wont take the time to put a description to their imgs.

If you have any questions I will keep on giving support on the gallery here
Thanks! Very nice!

Note: When a description has an apostrophe in the text it is rendered with several forward slashes in the mouse hover.

AMR
danm97

Ask Mr. Religion wrote:
Thanks! Very nice!

Note: When a description has an apostrophe in the text it is rendered with several forward slashes in the mouse hover.

AMR


macros does that with apostrophes, I dont know why though
Zudane

It's a security thing.. rather difficult work around for it, easiest thing to do though is just not use apostrophes in it.

       myfreeforum.org Forum Index -> Portal components
Page 1 of 1
Create your own free forum | Buy a domain to use with your forum