Ngg
From ThaiiS Note (Wiki)
Contents |
NextGEN Gallery
- http://wordpress.org/extend/plugins/nextgen-gallery/
- http://alexrabe.de/wordpress-plugins/nextgen-gallery/
NGG Effect option
NGG option fot lightview plus
class='lightview' rel='gallery[thaiis]'
class='lightview' rel='gallery[%GALLERY_NAME%]'
Lightview does the same as lightbox, but in a much nicer way and since Version 2.0 much more. Now lightview-plus plays videos from YouTube and Vimeo. This plugin automatically enhance image links to use lightview. This plugin uses prototype and scriptaculous.
NGG option fot Fancy Box
class="zoom" rel="groupname"
on Header
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.test1").fancybox(); /* Using custom settings */
$("a.fade1").fancybox({ 'hideOnContentClick': true });
$("a.zoom").fancybox({
'zoomSpeedIn': 700,
'padding':0,
'zoomSpeedOut': 700,
'overlayShow': true,
'overlayOpacity': 0.8
}); });
</script>
shortcode
To show a gallery use the shortcode
[ nggallery id=x ]
[ album id=x template=extend]
Now is this a new way to sort galleries via the tag system. It only support the compact view . I used here the code:
[ nggtags album=WordPress,Cologne,Irland ]
This is a example for a tag cloud. You can add this with the shortcode :
[ tagcloud ]
For a slideshow :[ slideshow id=x w=width h=height ]
For a album : [ album id=x template=extend] or [ album id=x template=compact ]
For a gallery : [ nggallery id=x ]
For a single picture : [ singlepic id=x w=width h=height mode=web20|watermark float=left|right ]
For a image browser : [ imagebrowse r id=x ]
To show image sorted by tags :[ nggtags gallery=mytag,wordpress,... ]
To show tag albums : [ nggtags album=mytag,wordpress,... ]
on template file out side loop
<?php echo do_shortcode('[nggallery id=1 template=slide]'); ?>
on ngg template
<?php
/**
Template Page Slide full images
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
<?php foreach ( $images as $image ) : ?>
<img src="<?php echo $image->imageURL ?>" />
<?php endforeach; ?>
<?php endif; ?>
template path & css
- template folder /wp-content/plugins/nextgen-gallery/view
- view page wp-content/plugins/nextgen-gallery/view/gallery.php
- css /wp-content/plugins/nextgen-gallery/css/nggallery.css
Read more
- http://nextgen-gallery.com/slideshow/nextgen-monoslideshow/
- http://nextgen-gallery.com/nggallery/page-8/album-1/gallery-3/
- http://fancybox.net/example
- http://www.tipsandtricks-hq.com/wordpress-estore-and-nextgen-gallery-integration-create-photo-shop-1200
View Youtube on nextgen gallery with fancybox2
<script language="javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});</script>
<script type="text/javascript" >
jQuery(document).ready(function($){
$(".ngg-gallery-thumbnail a").each(function (arr){
if ($(this).attr("title").substr(0,5)=="Video"){
$(this).attr("class","various fancybox.iframe");
$(this).attr("rel","");
$(this).attr("href",$(this).children("img").attr("title"));
}
})
});
</script>
on ngg title
http://www.youtube.com/embed/te_iR1dmHuw?autoplay=1
on ngg des=
Video
ngg option effect
class="fancybox-button" rel="fancybox-button"