Heres some galleries Ive recently looked at and will consider using in the future. They are not popups like lightbox.
http://malsup.com/jquery/cycle/
A gallery slideshow with multiple possible effects for transitions. (auto cycling through images)
http://devkick.com/lab/galleria/
A gallery maker with fade transitions and auto thumnail navigation. Good for a proper gallery but dosnt have choice of transitions as far as I can tell.
http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/
Photogallery with slide transition auto pagination for navigation. No back link on photo clicking photo only goes forwards.
http://smoothgallery.jondesign.net/
I used Smoothgallery today for a project. It was pretty good and is working in IE6 fine, took a bit longer than lightbox to set up. Spent a bit of time in forums getting around little issues. The great thing about it though is that if the user has javascript switched off the images just list themselves neatly down the page like a blog. Use the downloaded example demoslide.html, and customised it. Basically the problems were:
• showArrows: false, - this breaks the gallery. To get rid of the arrows do it in the css by making the arrow links css opacity levels be 0 everywhere.
• Deleting the 'open image' href will break the gallery unless you have added the option embedLinks: false, that has the added benefit of removing the lightbulb from the middle of the picture.
• Delecting the thumbnail image links breaks the gallery unless you specify the option showCarousel: false,
• You can easily remove the image title/ caption with the declaration showInfopane: false,
Showing posts with label Plugins and Extentions. Show all posts
Showing posts with label Plugins and Extentions. Show all posts
Tuesday, August 19, 2008
Tripoli - HTML CSS resetter and layout generator
Tripoli - HTML resetter. Simply is a base stylesheet that makes pretty CSS styling by default of all the elements from the get go. Blockquotes look great. So do lists, tables, forms. etc. Also has plugins for special typographic goodness/correctness and extra visual formatting...
Going to try this on the next project - its gives you a great clean place to start with everything looking nice and with browser consistency tested already.
http://devkick.com/lab/tripoli/sample.php?base=base&visual=visual&type=type
For extra rapidness - use in conjunction with...
Tripoli CSS layout tool - great little layout generator for making common web layouts that have already been browser tested. Just add your nav!
http://devkick.com/lab/tripoli/layout.php?lay=l1&width=wide&style=equal
Going to try this on the next project - its gives you a great clean place to start with everything looking nice and with browser consistency tested already.
http://devkick.com/lab/tripoli/sample.php?base=base&visual=visual&type=type
For extra rapidness - use in conjunction with...
Tripoli CSS layout tool - great little layout generator for making common web layouts that have already been browser tested. Just add your nav!
http://devkick.com/lab/tripoli/layout.php?lay=l1&width=wide&style=equal
Friday, August 1, 2008
IE6 PNG Transparency Fixes
Looked for a few solutions for the IE6 transparency problem:
SUPERSLEIGHT:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Basically trialling supersleight right now, its like a magic bullet that just whacks all the transparent pngs on your page without you having to do anything except include link to supersleight.js in conditional comments in your head tag. Think this is the best thing to try first since its so quick to get working.
I like especially that conditional comments mean this is all kept away from everything else. Apply it to the whole site, then go through page by page (browsing in a complete version of IE 6 of course) and see if its messed anything up, like links becoming not clickable, forms not working, or backgrounds becoming positioned weirdly. Then you can add specific fixes for these in your IE only stylesheet. If your lucky, it will work right out of the box, because in the supersleight code its applied fixes for making links clickable and making INPUT (forms stuff) areas work.
If any links etc dont work, the easiest way to fix is put in your IE only stylesheet the thing thats not working with position relative and z-index:1 for good measure. You can just list everything you can think of aswell to be paranoid:
a, li a, INPUT, TEXTAREA, SELECT, OPTION, BUTTON {
position: relative;
z-index: 1;
}
Sometimes it still will break things, like when i had an image map, the rollovers stopped being active. I had to apply a position:relative to the div that was containing the image map which is a child of a background which has transparency. Dont think about it too much, just whatever is not working, put a position relative on the div it is in. (But if its in a div that has transparency, youll need to make and extra div wrapper inside the div that has transparency, and make THAT position:relative. Theres also the issue of it not being applied to the rolled over image out of the box, but havn't got to that yet, think it just has be be called again when the image is rolled over.
ALPHAIMAGELOADER ON ITS OWN:
If your lucky and your site has only a couple of transparent areas, ie backgrounds, then you can apply fixes specifically using the AlphaImageLoader on its own. This below worked fine for a background that i had set to background-repeat:repeat, BUT it was a FLAT colour background that was semi transparent, not a patterned one like stripes or something. It stretches your background which is ok for a non-patterned background or non-gradiented background. actually might be ok for a gradient that repeats only one direction, havnt tried it though.
eg. in an IE6 only conditional commented stylesheet add your fixes
#adivwithatransbkrndthatrepeats {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrnd.png',sizingMethod='scale');
height: 1% /*might be necessary sometimes to make it have layout*/
}
if you want to apply it to a background image that dosnt repeat, ie a single logo that is a background image then use it with the sizing method crop instead.
#adivwithatransbkrndthatdosntrepeat {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrndthatdosntrepeat.png',sizingMethod='crop');
}
Your links etc that are in the div getting the fix will stop being clickable, so youll need to then apply the position:relative bizzo as described above. And it dosnt work on divs or whatever that dont 'have layout'.
TWIN HELIX:
Will probably try this if i cant get the rollover to work using Supersleight, because it says it supports rollovers out of the box. The thing that concerned me was the way the relative linking had to be, it looked like it was going to be tricky with multiple folders site structure.
http://www.twinhelix.com/css/iepngfix/demo/
Some other solutions are listed here with more full descriptions of options:
http://www.dedestruct.com/2008/01/13/cross-browser-transparency-with-png/
JQUERY:
http://jquery.khurshid.com/ifixpng.php
and following on:
http://plugins.jquery.com/project/iFixPng2
This is an example of a site that uses tricky side columns with transparency fixes
http://www.builtbybuffalo.com/
SUPERSLEIGHT:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Basically trialling supersleight right now, its like a magic bullet that just whacks all the transparent pngs on your page without you having to do anything except include link to supersleight.js in conditional comments in your head tag. Think this is the best thing to try first since its so quick to get working.
I like especially that conditional comments mean this is all kept away from everything else. Apply it to the whole site, then go through page by page (browsing in a complete version of IE 6 of course) and see if its messed anything up, like links becoming not clickable, forms not working, or backgrounds becoming positioned weirdly. Then you can add specific fixes for these in your IE only stylesheet. If your lucky, it will work right out of the box, because in the supersleight code its applied fixes for making links clickable and making INPUT (forms stuff) areas work.
If any links etc dont work, the easiest way to fix is put in your IE only stylesheet the thing thats not working with position relative and z-index:1 for good measure. You can just list everything you can think of aswell to be paranoid:
a, li a, INPUT, TEXTAREA, SELECT, OPTION, BUTTON {
position: relative;
z-index: 1;
}
Sometimes it still will break things, like when i had an image map, the rollovers stopped being active. I had to apply a position:relative to the div that was containing the image map which is a child of a background which has transparency. Dont think about it too much, just whatever is not working, put a position relative on the div it is in. (But if its in a div that has transparency, youll need to make and extra div wrapper inside the div that has transparency, and make THAT position:relative. Theres also the issue of it not being applied to the rolled over image out of the box, but havn't got to that yet, think it just has be be called again when the image is rolled over.
ALPHAIMAGELOADER ON ITS OWN:
If your lucky and your site has only a couple of transparent areas, ie backgrounds, then you can apply fixes specifically using the AlphaImageLoader on its own. This below worked fine for a background that i had set to background-repeat:repeat, BUT it was a FLAT colour background that was semi transparent, not a patterned one like stripes or something. It stretches your background which is ok for a non-patterned background or non-gradiented background. actually might be ok for a gradient that repeats only one direction, havnt tried it though.
eg. in an IE6 only conditional commented stylesheet add your fixes
#adivwithatransbkrndthatrepeats {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrnd.png',sizingMethod='scale');
height: 1% /*might be necessary sometimes to make it have layout*/
}
if you want to apply it to a background image that dosnt repeat, ie a single logo that is a background image then use it with the sizing method crop instead.
#adivwithatransbkrndthatdosntrepeat {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrndthatdosntrepeat.png',sizingMethod='crop');
}
Your links etc that are in the div getting the fix will stop being clickable, so youll need to then apply the position:relative bizzo as described above. And it dosnt work on divs or whatever that dont 'have layout'.
TWIN HELIX:
Will probably try this if i cant get the rollover to work using Supersleight, because it says it supports rollovers out of the box. The thing that concerned me was the way the relative linking had to be, it looked like it was going to be tricky with multiple folders site structure.
http://www.twinhelix.com/css/iepngfix/demo/
Some other solutions are listed here with more full descriptions of options:
http://www.dedestruct.com/2008/01/13/cross-browser-transparency-with-png/
JQUERY:
http://jquery.khurshid.com/ifixpng.php
and following on:
http://plugins.jquery.com/project/iFixPng2
This is an example of a site that uses tricky side columns with transparency fixes
http://www.builtbybuffalo.com/
Friday, July 11, 2008
Adobe Exchange
Download hundreds of easy-to-install extensions, time-saving functions, code and more.
Subscribe to:
Posts (Atom)
Posts
