FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups  Who is OnlineWho is Online   Join! (free) Join! (free)  
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
  • Welcome
  • Guest

Better cosmetic for your gallery
Page 1, 2, 3  Next
 
Post new topic   Reply to topic    myfreeforum.org Forum Index -> Portal components
View previous topic :: View next topic  
Author Message
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 1:00 am    Post subject: Better cosmetic for your gallery  Reply with quote

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 !!
_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 4:13 am    Post subject: Reply with quote

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 -->

_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ask Mr. Religion
Craftsman
Craftsman
FLAG

Virtual Cash: 4500

Joined: 01 Aug 2008
Posts: 423



Add Karma

rated by 3 members
Add Comment
Show Comments


online/offline
PostPosted: Sun Nov 21, 2010 5:28 am    Post subject: Reply with quote

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
_________________
Ask Mr. Religion (a.k.a. 'Patrick')
Founder, Reformed Theology Institute
Back to top
View user's profile Send private message
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 5:45 am    Post subject: Reply with quote

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.
_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ask Mr. Religion
Craftsman
Craftsman
FLAG

Virtual Cash: 4500

Joined: 01 Aug 2008
Posts: 423



Add Karma

rated by 3 members
Add Comment
Show Comments


online/offline
PostPosted: Sun Nov 21, 2010 5:58 am    Post subject: Reply with quote

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
_________________
Ask Mr. Religion (a.k.a. 'Patrick')
Founder, Reformed Theology Institute
Back to top
View user's profile Send private message
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 6:05 am    Post subject: Reply with quote

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.
_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ask Mr. Religion
Craftsman
Craftsman
FLAG

Virtual Cash: 4500

Joined: 01 Aug 2008
Posts: 423



Add Karma

rated by 3 members
Add Comment
Show Comments


online/offline
PostPosted: Sun Nov 21, 2010 6:44 am    Post subject: Reply with quote

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
_________________
Ask Mr. Religion (a.k.a. 'Patrick')
Founder, Reformed Theology Institute
Back to top
View user's profile Send private message
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 6:48 am    Post subject: Reply with quote

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.
_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ask Mr. Religion
Craftsman
Craftsman
FLAG

Virtual Cash: 4500

Joined: 01 Aug 2008
Posts: 423



Add Karma

rated by 3 members
Add Comment
Show Comments


online/offline
PostPosted: Sun Nov 21, 2010 6:54 am    Post subject: Reply with quote

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
_________________
Ask Mr. Religion (a.k.a. 'Patrick')
Founder, Reformed Theology Institute
Back to top
View user's profile Send private message
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 7:01 am    Post subject: Reply with quote

Now thats just weird cuz its the original gallery link  
_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ask Mr. Religion
Craftsman
Craftsman
FLAG

Virtual Cash: 4500

Joined: 01 Aug 2008
Posts: 423



Add Karma

rated by 3 members
Add Comment
Show Comments


online/offline
PostPosted: Sun Nov 21, 2010 7:03 am    Post subject: Reply with quote

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
_________________
Ask Mr. Religion (a.k.a. 'Patrick')
Founder, Reformed Theology Institute
Back to top
View user's profile Send private message
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 7:06 am    Post subject: Reply with quote

Its in the original cms_gallery.tpl
_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ask Mr. Religion
Craftsman
Craftsman
FLAG

Virtual Cash: 4500

Joined: 01 Aug 2008
Posts: 423



Add Karma

rated by 3 members
Add Comment
Show Comments


online/offline
PostPosted: Sun Nov 21, 2010 7:09 am    Post subject: Reply with quote

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
_________________
Ask Mr. Religion (a.k.a. 'Patrick')
Founder, Reformed Theology Institute
Back to top
View user's profile Send private message
danm97
Craftsman
Craftsman
FLAG

Virtual Cash: 4400

Joined: 29 Dec 2009
Posts: 429


Location: Montreal, Québec, Canada
Add Karma

rated by 5 members
Add Comment
Show Comments

Freeforallpoker.net
online/offline
PostPosted: Sun Nov 21, 2010 7:27 am    Post subject: Reply with quote

Must be something on your site... tested it on mine and it works perfecly.
_________________
Peace is always the right solution !!

http://www.freeforallpoker.net/

Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ask Mr. Religion
Craftsman
Craftsman
FLAG

Virtual Cash: 4500

Joined: 01 Aug 2008
Posts: 423



Add Karma

rated by 3 members
Add Comment
Show Comments


online/offline
PostPosted: Sun Nov 21, 2010 7:32 am    Post subject: Reply with quote

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


_________________
Ask Mr. Religion (a.k.a. 'Patrick')
Founder, Reformed Theology Institute
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    myfreeforum.org Forum Index -> Portal components All times are GMT
Page 1, 2, 3  Next
Page 1 of 3
 
 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File  Gallery  Forum Archive
Powered by phpBB © 2001, 2005 phpBB Group
Create your own free forum | Buy a domain to use with your forum