PDA

View Full Version : Add-On Releases - [PXL] PP Round Thumbnail Overlay v1.2


PixelFx
25 Oct 2006, 21:35
PP Round Thumbnail Overlay v1.2

I've added this to a number of my sites, and thought I'd share it with members here. It's been a long time since I contributed back to this community so I wanted to start with this.

What does it do?
Basically this creates a round overlay box around all tumbnail images in your vbulletin intergreated & photopost vbgallery. I'll be working on a number of upgrades to this template hack.

Credits:
- PixelFX
- Zachariah
- Darkwaltz4
- Lizard King

Scripts Required:

- vBulletin v3.6.8
- Photopost vBGallery v2.3
- Plugin Forum Home
- Plugin User Profile

Addon Scripts:
- Photopost vBGallery CMPS 3.0

The area this effects the following,
- MemberInfo (Profile)
- vBAdvanced CMPS Main Page
- Main Gallery Thumbmails
- Gallery Thumbnail Film Strip
- Hidden/Open Catigory Images

Notes: This script has been updated to work with the above scripts although should work with earilier versions. If you have problems installing it please let me know.

ScreenShot Notes:
The layout of the gallery my vary as I've custom edited the layouts of each page specifc for my gallery. For my next style. However the round overlay effects for each page, as basically to show you what this hack does as far as overlay images goes.

Files Included:
- TXT file with Template install notes
- overlay-filmstrip.gif
- overlay-filmstrip.PSD
- overlay-imagebit.gif
- overlay-imagebit.PSD
- Screenshots Below Updated for v1.2

Version Informaton:

1.3 (Next Release Notes (ETA Fall 2007 or Sooner)
- Option to Add Reflective Surfaces to Thumbnails
- More Overlay Changes to vBGallery v2.1
- A number of tweaks to code
- Improved PSDs

1.2 (November 11th, 2006
- Tested at Working on vBulletin v3.6.3
- No Change Yet.

1.2 (November 1st, 2006)
- Added Round Box Overlay Support to Catigory Bits
- Updated Code to Reflect overlay-imagebit.gif changes
- Renamed overlay-image.gif to overlay-imagebit.gif

- Created New Image Bit Overlay PSD & Layer Group for v1.2 of this Addon
- Added 3 Types of Image Overlay Colors to PSD
1) Added: Color Overlay, vBFront End (Match default layout of vBulletin v362) (default setting)
2) Added: Black Color Overlay & White Border, for darker sites, you can change the color overlay to match color of your site.
3) Added: White Round Box With Black Border

- Optimized Gif & PSD Code to even more bandwidth friendly!
- Added Alternate FilmStrip PSD v1.2 - Same Features as Above
- Updated Film Strip Code with New PSD Information
- overlay-filmstrip.gif Updated to Match Default Frontend Colors of vBulletin
- Added Round Box Overlay Support to Catigory Bits
- Updated Code to Reflect overlay-imagebit.gif changes
- Renamed overlay-image.gif to overlay-imagebit.gif
- Created New Image Bit Overlay PSD & Layer Group for v1.2 of this Addon
- Pending more changes...

1.1
- Cleanup various changes to hack code (released as part of 1.2)

1.0
- Added Film Strip Round Box Support
- Added Image_Bit Round Box Support
- Created PSD to Make Round Gifs
- Release of Template Hack

Install Information:
Upload overlay-imagebit.gif & overlay-filmstrip.gif to the URL Below. Then do the Template Edits Below. I've included Txt File in Zip if you want to do this hack offline.

URL/Forum/Images/Misc/

4 Template Edits Below:
1) adv_gallery_imagebit
2) adv_gallery_showimage_filmthumb
3) adv_gallery_categorybit_level1
4) adv_gallery_categorybit_level2

TEMPLATE EDITS BELOW

1) OPEN Template: adv_gallery_imagebit

FIND:



<div align="center" style="margin-top:5px;margin-bottom:5px">
<a href="showimage.php?$session[sessionurl]i=$images[imageid]$adv_sorturl"><img alt="$images[title]" border="0" src="$images" /></a>
</div>



REPLACE WITH:



<!-- Image Bit Overlay v1.2 Start - by PixelFX -->
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="background-repeat: no-repeat; background-position: center; background-image: url($images); class="alt1" bgcolor="#000000">
<a href="showimage.php?$session[sessionurl]i=$images[imageid]$adv_sorturl">

<img src="$stylevar[imgdir_misc]/overlay-imagebit.gif" height="104" width="135" border="0" alt="$images[title]"></a></td>
</tr>
</table>
<!-- Image Bit Overlay v1.2 End - by PixelFX -->



DONE / NEXT..

2) OPEN Template: adv_gallery_showimage_filmthumb

FIND:



<td align="center" class="alt2" valign="bottom" width="$filmcellwidth">
<if condition="$imgid == $imageid">
<img border="0" alt="$imginfo[title]" src="$imginfo[url]" /><br />$imginfo[filmarrow]
<else />
<a href="showimage.php?i=$imgid$adv_sorturl"><img border="0" alt="$imginfo[title]" src="$imginfo[url]" /></a><br /><a href="showimage.php?i=$imgid$adv_sorturl">$imginfo[filmarrow]</a>
</if>
</td>



REPLACE ENTIRE BLOCK WITH:



<!-- Film Strip Overlay v1.2 Start - by PixelFX -->
<td align="center" class="alt2" valign="bottom" width="$filmcellwidth">
<if condition="$imgid == $imageid">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="background-repeat: no-repeat; background-position: center; background-image: url($imginfo[url]); class="alt1" bgcolor="#000000">
<img src="$stylevar[imgdir_misc]/overlay-filmstrip.gif" height="104" width="135" border="0" alt="$imginfo[title]"></td>
</tr>
<tr><td>
<div align="center">$imginfo[filmarrow]</div>
</td></tr>
</table>
<else />
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="background-repeat: no-repeat; background-position: center; background-image: url($imginfo[url]); class="alt1" bgcolor="#000000">
<a href="showimage.php?i=$imgid$adv_sorturl">
<img src="$stylevar[imgdir_misc]/overlay-filmstrip.gif" height="104" width="135" border="0" alt="$imginfo[title]"></a></td>
</tr>
<tr><td>
<div align="center"><a href="showimage.php?i=$imgid$adv_sorturl">$imginfo[filmarrow]</a></div>
</td></tr>
</table>
</if>
</td>
<!-- Film Strip Overlay v1.2 End - by PixelFX -->



DONE / NEXT..

3) OPEN Template: adv_gallery_categorybit_level1

FIND:



<if condition="$cats['catimage']">
<td><a href="browseimages.php?$session[sessionurl]c=$cats[catid]"><img alt="" border="0" src="$vba_options[gallery_fileurl]/$cats[catimageurl]" width="$cats[catimagewidth]" height="$cats[catimageheight]" /></a></td>
<td width="$stylevar[cellpadding]"><img alt="" src="$vboptions[bburl]/$vboptions[cleargifurl]" width="$stylevar[cellpadding]" /></td>
</if>



REPLACE WITH:



<!-- Catigory Image Level1 Overlay v1.2 Start - by PixelFX -->
<if condition="$cats['catimage']">
<td style="background-repeat: no-repeat; background-position: center; background-image: url($vba_options[gallery_fileurl]/$cats[catimageurl]); class="alt1" bgcolor="#000000"><a href="browseimages.php?$session[sessionurl]c=$cats[catid]"><img src="$stylevar[imgdir_misc]/overlay-imagebit.gif" height="$cats[catimageheight]" width="$cats[catimagewidth]" border="0" alt="$imginfo[title]"></a></td>
<td width="$stylevar[cellpadding]"><img alt="" src="$vboptions[bburl]/$vboptions[cleargifurl]" width="$stylevar[cellpadding]" /></td>
</if>
<!-- Catigory Image Level1 Overlay v1.2 End - by PixelFX -->



DONE / NEXT..

4) OPEN Template: adv_gallery_categorybit_level2

FIND:



<if condition="$cats['catimage']">
<td><a href="browseimages.php?$session[sessionurl]c=$cats[catid]"><img alt="" border="0" src="$vba_options[gallery_fileurl]/$cats[catimageurl]" width="$cats[catimagewidth]" height="$cats[catimageheight]" /></a></td>
<td width="$stylevar[cellpadding]"><img alt="" src="$vboptions[bburl]/$vboptions[cleargifurl]" width="$stylevar[cellpadding]" /></td>
</if>



REPLACE WITH:



<!-- Catigory Image Level2 Overlay v1.2 Start - by PixelFX -->
<if condition="$cats['catimage']">
<td style="background-repeat: no-repeat; background-position: center; background-image: url($vba_options[gallery_fileurl]/$cats[catimageurl]); class="alt1" bgcolor="#000000"><a href="browseimages.php?$session[sessionurl]c=$cats[catid]"><img src="$stylevar[imgdir_misc]/overlay-imagebit.gif" height="$cats[catimageheight]" width="$cats[catimagewidth]" border="0" alt="$imginfo[title]"></a></td>
<td width="$stylevar[cellpadding]"><img alt="" src="$vboptions[bburl]/$vboptions[cleargifurl]" width="$stylevar[cellpadding]" /></td>
</if>
<!-- Catigory Image Level2 Overlay v1.2 End - by PixelFX -->



DONE EDITS.

This is the end of your template edits.

I'll be adding more areas to this hack in the next version, as well as cleaning up code. I've included screenshots below to see what it looks like.

It basically just adds a cleaner look to your gallery. for those interested in using it.

If you have questions free to say hi below ..

DONATE:
If you like the Included PSD Files or this Hack, and want to donate, my paypal email is paypal@vbcredits.com Users are free to use the PSD files as they need to. If you have questions on how to use the PSD's PM me here or on my site once open.

[U]DEMO:
I've updated my layout and site with a new style, and added this hack to the gallery for those that want a live demo again. (Aug 4th, 2007)

[URL]http://www.vbcredits.com/gallery/index.php

PLEASE CLICK INSTALL

Enjoy!

ChavMagnet
25 Oct 2006, 22:02
1st post WOOT!

Zachariah
25 Oct 2006, 23:16
:D nice

KevNJ
25 Oct 2006, 23:43
* subscribes to thread to install later tonight *

Ev!L ErN!E
26 Oct 2006, 00:01
very nice

Zachariah
26 Oct 2006, 00:36
On: adv_gallery_imagebit

- I had to do this.

<div align="center" style="background-repeat: no-repeat; background-position: center; background-image: url($images[url]); class="alt1" bgcolor="#000000">
<a href="showimage.php?$session[sessionurl]i=$images[imageid]$adv_sorturl">
<img src="$stylevar[imgdir_misc]/overlay-round.gif" height="104" width="135" border="0" alt="$images[title]"></a>
</div>

Lizard King
26 Oct 2006, 04:49
Never had time to get this done with the new gallery :)

Clayton
26 Oct 2006, 19:29
this looks very smart

Lionel
26 Oct 2006, 23:02
I like this a lot. It's a pity I don't know how to make the gray background transparent in photoshop

becafuel
27 Oct 2006, 07:27
You can also play with Firefox specific CSS, which implements CSS3 round borders :

-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius: 15px;

This will result in someting like the attached screenshot for FF users. Other browsers will ignore these and draw a regular border.

PixelFx
30 Oct 2006, 01:19
glad yeah guys like it, I have a new update coming soon

Kihon Kata
30 Oct 2006, 04:19
glad yeah guys like it, I have a new update coming soon
Waits, for this. Pixel, when will you have this new release out?

PixelFx
30 Oct 2006, 20:38
I'm revamping my pixelfx.ca web server, when I get that done and latest code on it, which I'm in the process of doing, I'll be releasing an updated version of this to make sure I didn't miss any bugs, I'll also be adding more area's with overlay support.

Its kinda work in progress, I'm working on a new hack called vbProfile v1.0 which is a full rewrite of the profile system as well .. so I guess eta would be soon *blinks*

Clayton
30 Oct 2006, 20:47
get well soon

:D

;)

PixelFx
01 Nov 2006, 21:27
Updated hack to v1.2 with a number of new features, and cleaned up psd's/changes/optimizations etc.

Kihon Kata
01 Nov 2006, 21:45
Do you have to have:

- Plugin Forum Home
- Plugin User Profile

?

PixelFx
01 Nov 2006, 21:49
Those Plugins are part of Photopost vbGallery 2.1, however if you are using earilier versions of PhotoPost vBGallery 2.0 and below, Zachariah has made a number of addons at Photopost.com and on this site for Forum Home Addon, and User Profile.

I'll update links to those hacks shortly.

Kihon Kata
02 Nov 2006, 05:42
Those Plugins are part of Photopost vbGallery 2.1, however if you are using earilier versions of PhotoPost vBGallery 2.0 and below, Zachariah has made a number of addons at Photopost.com and on this site for Forum Home Addon, and User Profile.

I'll update links to those hacks shortly.
I am running the latest Photopost vbGallery 2.1

Kihon Kata
02 Nov 2006, 12:44
BTW, how will this effect this hack here (http://www.photopost.com/forum/showthread.php?t=118781)

PixelFx
02 Nov 2006, 14:58
I am running the latest Photopost vbGallery 2.1

if your running 2.1, then in your admincp for vbgallery, there is section called "Modify Add-Ons" this has place for you to turn on your profile images, and forum home images. :D

as for the other script you mentioned, I don't know as I haven't used it.

aceofspades
02 Nov 2006, 20:12
On your gallery it looks really nice but when i did it on my gallery it looks horrible, like this:

http://img524.imageshack.us/img524/3914/vbgallerymodtv6.jpg

Can you tell me what i might have done wrong, or what i can do so that the picture inside takes up all of the space like in your pictures.

PixelFx
02 Nov 2006, 20:26
I make all my default thumbnails for vbulletin attachments and vbgallery thumbnails 135pixels wide ... the round box I included in the hack is that size as well. If you look at the code, .. this makes the images for the most part fill the round boxes nicely...

sensimilla
03 Nov 2006, 08:10
worked fine for me with vb 3.5 and vbadvanced gallery v1.0.3

thanks alot!

aceofspades
03 Nov 2006, 22:21
im using vb 3.6 with vbgallery v2 and it still looks horrible with the thumbnails 135px wide. It looks the same as the pic above. What can i be doing wrong ? :(

PixelFx
31 Dec 2006, 01:50
it just looks like your default thumbnail size is 100 vs 135...

sam anders
02 Jan 2007, 11:49
nice hack would this work with the vbphotopost full version?

PixelFx
04 Feb 2007, 04:55
as far as I know photopost full version has its own round box system, in it, so it doesn't need this type of addon. Sorry for delay, been in hospital the last week with flue ..

glad you like it though .. currently this works with the lastest Photopost vBgallery/vbagallery aka same script more or less. I'm working on some updates, including various types of light box, however I may add those as a seperate hack in the future.

Chadi
07 Feb 2007, 20:55
Can someone please explain this?

maxicep
09 Feb 2007, 13:36
nice hack reserved

PixelFx
10 Feb 2007, 06:34
it looks like you forgot to upload the images I supplied in the zip file of this hack :P

Chadi
05 Mar 2007, 23:07
I installed this a month ago but I have a small problem

- The white background (square) is not transparent, even in Firefox 2.
- the round background area is black, how do I change that color to something custom?

PhoneiX
14 Mar 2007, 10:14
Excellent Hack! :)

*Installed*

Gsmdenis
16 Mar 2007, 23:54
very very nice hack

PixelFx
27 Apr 2007, 06:13
your welcome :D I'll have an update soon for vBGallery 2.2, just working out some new features :D

G0F0RBR0KE
12 Jul 2007, 07:38
Very nice and makes the gallery more professional style.

PixelFx
12 Jul 2007, 08:02
thanks, I accually started update for this for vbgallery 2.3 and vbadvanced cmps 3.0 rc1, messing wit other addons as well. Glad you like it :d

PapaSmurf
22 Jul 2007, 10:19
I can't wait for the vbadv 3.0 rc1 release.

Good work.

PixelFx
04 Aug 2007, 19:05
updated and tested everything on vb368, also working on v1.3 which will add even more fun to this mod.

megawelle
25 Dec 2007, 14:09
hi, is that hack compatible with vbgallery 2.4?

Squintz
10 Mar 2008, 20:04
I got this working on 2.42 with VB 3.68. but I ran into some problems with the locations of the overlay images. I had to go through the code and direct link the URL's, and it seemed to work.

Being more of a design guy, I decided to add some shadows and color to my overlays. I attached the PSD, but I corrected it for my forums thumbnail size (140px).

http://dev1.hockeyprimetime.com/overlay_shadow.gif

ten1nch
15 Mar 2008, 03:41
Shoot. I'm boned.

Cannot, for the life of me get the images to fit inside the overlay. Damnit.

MagicThemeParks
08 Jun 2010, 11:35
Will this work with vB 3.8x and the latest PP?

PixelFx
11 Jun 2010, 00:56
I'm working on an album system version of this for 3.8.x and 4.0.x, I'll post it when ready. as for vbgallery version, I have 5 owned licenses for vbgallery but non active, so I can't download latest version of vbgallery to make update at the moment.