I figure I may as well plug my online media portfolio.
http://www.mmohler.com
It is fairly graphic heavy which some may like and others may not. It is important to note that there is some good and helpful code I have tucked in there. No, I did not write any of the javascript/jquery. But good news for you, I can share where I got it from.
Lightbox:
I used a very nice and flexible lightbox from No-margin-for-errors.com
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
This lightbox can do just about anything you want. images, flash, iframes, youtube. As far as lighboxes go it is actually quite easy to plug it into your website and there is a good amount of nice clear documentation on the website to help you out. It also comes with 6ish different styles! I highly recommend this lighbox.
Scroll down:
Here I found a very sweet and simple bit of code. Click a link and it will give you a nice smooth scroll down to the content on your page.
http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/
Image Preview:
This one is slightly imperfect, but I suppose I was pushing my luck getting it to work. You will notice on my portfolio that when you hover over some items a preview image pops up. It is a really nice feature. Sadly, it wont work on all my items. A few of my portfolio links open up an iFrame or Flash movie. Image preview cannot give a preview of these items. I could work around this by rearranging my lightbox items, but I chose not to bother. I think I had a little more trouble getting this one working. Unlike the other scripts which are located in within the <head> this script only worked for me if i put it just above my </body> tag. Probably has something to do with it just being javascript and not jquery. I am not good at that stuff, so I just have to guess.
Anywho, great little feature. Here is the link
http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
Wednesday, May 25, 2011
image hover "swap" without javascript
I was working on a splash page for Fiona's site and she wanted an image to change when you hovered over it.
This is easy enough to do with normal links using css. You just change the background color or image using
a:link, a:hover, or a:visited {}
so the background behind the link changes.
But if you want one image to switch to another it is not quite as easy. Eventually, I found the best technique is to put an image into your HTML with a link around it. And then in CSS put in a background image directly behind your html image. You can then use the following CSS code to hide your HTML image thus reviling your background image.
Here is a link which explains it in better detail
http://brassblogs.com/blog/css-image-swap
and here is where I used it myself
http://www.snoweventdesign.com
This is easy enough to do with normal links using css. You just change the background color or image using
a:link, a:hover, or a:visited {}
so the background behind the link changes.
But if you want one image to switch to another it is not quite as easy. Eventually, I found the best technique is to put an image into your HTML with a link around it. And then in CSS put in a background image directly behind your html image. You can then use the following CSS code to hide your HTML image thus reviling your background image.
Here is a link which explains it in better detail
http://brassblogs.com/blog/css-image-swap
and here is where I used it myself
http://www.snoweventdesign.com
Monday, May 23, 2011
moving Joomla webpage to new Directory
So you make a test Joomla webpage and want to move it to a new location on your server?
Sounds like it should be easy, but it can be a pain in the butt what with the databases and config.php and all that stuff.
Here is how to make it easier.
You should have Akeeba backup installed on your Joomla website already. This will allow you to make backup copies of your website in case something bad happens or, like in our case, you want to move your site.
Next go to the Akeeba website and download Kickstart. Kickstart pretty much does weird stuff for you. I will not go into too much detail because you should just consult the documentation that comes with it. In short, locate the directory you want your page to appear on and first throw the Kickstart files in there followed by your akeeba backup file (.jpa) and then visit your site and go through the process.
There is a little more to it, but it works quite well. You still have to have some idea of what you are doing though.
Good luck.
here are the links
https://www.akeebabackup.com/
https://www.akeebabackup.com/software/akeeba-kickstart.html
Sounds like it should be easy, but it can be a pain in the butt what with the databases and config.php and all that stuff.
Here is how to make it easier.
You should have Akeeba backup installed on your Joomla website already. This will allow you to make backup copies of your website in case something bad happens or, like in our case, you want to move your site.
Next go to the Akeeba website and download Kickstart. Kickstart pretty much does weird stuff for you. I will not go into too much detail because you should just consult the documentation that comes with it. In short, locate the directory you want your page to appear on and first throw the Kickstart files in there followed by your akeeba backup file (.jpa) and then visit your site and go through the process.
There is a little more to it, but it works quite well. You still have to have some idea of what you are doing though.
Good luck.
here are the links
https://www.akeebabackup.com/
https://www.akeebabackup.com/software/akeeba-kickstart.html
My wife's blog
I am stealing her idea, so I may as well give her some credit.
It is more about making real stuff in the not computer world.
PaperMakin'
It is more about making real stuff in the not computer world.
PaperMakin'
Hello
Hi, this is a blog I may or may not keep up with where I can post what I am working on.
It will work as a method to share what I am doing with people and also to keep a record for myself of methods and resources as I go.
Maybe you will stumble upon something here and find it helpful.
So hi. My name is Mike and this is a blog I am calling Media Makin'
Here is a link to my existing portfolio if you want to check it out. www.mmohler.com
It will work as a method to share what I am doing with people and also to keep a record for myself of methods and resources as I go.
Maybe you will stumble upon something here and find it helpful.
So hi. My name is Mike and this is a blog I am calling Media Makin'
Here is a link to my existing portfolio if you want to check it out. www.mmohler.com
Subscribe to:
Posts (Atom)