DesignerFied.com » MooTools

Dynamic Content Gallery Mod

Jake Hurst — Wed, 04 Nov 2009 20:50:26 +0000

I recently added the Dynamic Content Gallery WordPress Plugin to one of my friends sites. He isn’t to savvy with moving around and adding stuff to his server. So I had to add some stuff to this wonderful plugin so it would do thinks automatically.

First thing I did was add this: ”/>

That way I could upload the image inside WordPress and add a custom field key called featured with out having to go to the server and upload to the custom folder like the stock plugin says.

Another thing I changed is the this: I added this to the plugin

php the_content_rss(”, TRUE, ”, 50);

What that does is instead of having to add a custom key with text for the description in the Content Gallery now you do nothing. What you write in your post will be automatically added to the Gallery image descriptions.

So instead of this :

You have this:

I also added the Get The Image WordPress Plugin function to the Dynamic Content Gallery.

So you can ether add from the custom key ( featured)Â or just upload an image in WordPress and it will show up automatically! Make sure the image dimensions are right!

If you have the Dynamic Content Gallery installed and want to try my files. Please remember that this could break your Gallery.

Remember to back up everything first!!

You might want to backup the whole folder dynamic-content-gallery-plugin

Remember to rename the file that you are going to use dynamic-gallery.php

Download
Good luck and let me now what you think!!

Custom MooTools Tooltips Download Files

Jake Hurst — Mon, 30 Mar 2009 12:57:50 +0000

I have put together a zip with the files that you need to get your custom MooTools tooltips going. If you want to know how to add these to you site just check out this post.

Download

Add custom MooTools tooltips to your site

Smart Mootools Tooltips

Jake Hurst — Sun, 24 Aug 2008 16:15:22 +0000

Tool tips with Mootools just got even more cooler! Check it out, its called Smart Hover Box. You can add a hover html elements to any other element by adding a single id.

Smart Hover Box Features:

create a hover box out of any html element
smart positioning will always show hover box in window quadrant with the most space
optional close button by adding a user defined class to any element
user defined x and y hover element offset
user defined timeout after mouseleave event

Link: http://www.consideropen.com/blog/2008/08/smart-hover-box-for-mootools-12/

Add custom MooTools tooltips to your site

Jake Hurst — Thu, 17 Apr 2008 09:09:40 +0000

I first saw this over at WPelements and loved it. So I decided to show you how I put together cool looking tooltips for one of my friends sites. Tooltips come in handy when you want to add a cool hover effect with information in a small box to links, content areas like posts and in this case thumbnail images.

Check out the demo from Mootools.net

You can download the files you need here: http://mootools.net/download

After you upload those files to your server you will then need to put this code into to your page in between the if you are using TMS or WordPress this will all be in the header.php file.

After you have done that you will need to add a class and title to the links or images you want to show the tooltip.

To do that you will have to add this class=”tips” title=”Big Title :: the description” to your links or images that you want to see the tooltip with.

Example link with the class and title in red:

class=”tips” title=”Big Title :: the description”>

The next part is to customize the look of the tooltip. We will do that with CSS. You will need to add this to your existing CSS style sheet.

.tool-tip {
float:left;
color: #BBB;
width: 265px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 13px;
margin: 0;
color: #FFF;
padding: 8px 8px 4px;
background: url(/images/tips.png) repeat;
border-bottom: 1px solid #FFF;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(/images/tips.png) repeat;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}

I added a custom transparent PNG image. You can change that to a background color if you want.

Here is that tips.png, download it if you want and change it to the color you need. I used Fireworks to edit it.

Thats it, now you will have nice looking tooltips for your site.