[Plugin: NextGEN Gallery] Highslide JS effect – how to make it work with Nextgen
-
All other effects are possible but you need to add them manually. You can use other plugins to add the effect.
Highslide JS plugin or Lightbox JS Plugin1. i uploaded (unziped content of) http://projects.jesseheap.com/downloads/highslide-wordpress/wp-highslide.zip to wp-content/plugins/ (/wp-content/plugins/highslide/)
2. i downloaded http://highslide.com/download/highslide-4.1.8.zip
took highslide.js and copied it to /wp-content/plugins/highslide/ (by the way there already was such a file!)
3. /wp-admin/admin.php?page=nggallery-options#effects – here in Nextgen Gallery options (Effects tab) we can choose JavaScript Thumbnail effect – Highslide.
—
but nothing changes.
how to make that effect in Nextgen working, tell please?Thanx!
-
forget to mention:
i also copied highslide.js to /wp-content/plugins/nextgen-gallery/js/highslide.jsFollow this tutorial, worked for me:
here’s what i downloaded after using editor – http://x-files.net.ua/files/highslide.zip
i used – Gallery: vertical thumbstrip (no border) and a few not important changes in other tabs.
in header.php:
<!-- Highslide Plugin --> <link rel="stylesheet" type="text/css" href="wp-content/plugins/highslide/highslide.css" /> <script src="wp-content/plugins/highslide/highslide-full.js" type="text/javascript"></script> <script src="wp-content/plugins/highslide/highslide.config.js" type="text/javascript"></script> </head>
in highslide.config.js (of course before i uploaded it into WP):
/** * Site-specific configuration settings for Highslide JS */ hs.graphicsDir = 'highslide/graphics/'; hs.outlineType = 'custom'; hs.dimmingOpacity = 0.75; hs.fadeInOut = true; hs.align = 'center'; hs.marginBottom = 70; hs.marginLeft = 100; hs.captionEval = 'this.thumb.title'; hs.captionOverlay.position = 'below'; hs.registerOverlay({ html: '<div class="close-simple-white" onclick="return hs.close(this)" title="Закрити"></div>', position: 'top right', useOnHtml: true, fade: 2 // fading the semi-transparent overlay looks bad in IE }); hs.numberPosition = 'heading'; hs.transitions = ['expand', 'crossfade']; // Add the slideshow controller hs.addSlideshow({ // slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: false, overlayOptions: { className: 'text-controls', opacity: '1', position: 'bottom center', offsetX: '50', offsetY: '-10', relativeTo: 'viewport', hideOnMouseOut: true }, thumbstrip: { mode: 'vertical', position: 'middle left', relativeTo: 'viewport' } }); // Ukrainian language strings hs.lang = { cssDirection: 'ltr', loadingText: 'Завантаження...', loadingTitle: 'Натисніть для скасування', focusTitle: 'Натисніть щоб перемістити на передній план', fullExpandTitle: 'Розкрити до оригінального розміру', creditsText: 'Використовує <i>Highslide JS</i>', creditsTitle: 'Відвідати домашню сторінку Highslide JS', previousText: 'Попереднє', nextText: 'Наступне', moveText: 'Перемістити', closeText: 'Закрити', closeTitle: 'Закрити (esc)', resizeTitle: 'Змінити розмір', playText: 'Слайдшоу', playTitle: 'Почати слайдшоу (пробіл)', pauseText: 'Пауза', pauseTitle: 'Призупинити слайдшоу (пробіл)', previousTitle: 'Попереднє (стрілка ліворуч)', nextTitle: 'Наступне (стрілка праворуч)', moveTitle: 'Перемістити', fullExpandText: 'Оригінальний розмір', number: 'Зображення %1 з %2', restoreTitle: 'Настисніть кнопку мишеняти щоб закрити зображення, натисніть та перетягніть для зміни розташування. Для просмотру зображень користуйтеся стрілками.' }; // gallery config object var config1 = { slideshowGroup: 'group1', numberPosition: 'heading', transitions: ['expand', 'crossfade'] };
http://x-files.net.ua/?p=3043
now, when I click on any thumbnail – it show – LOADING for eternal life. 🙁please, help..
Have you cleared your browser’s cache? Because i tried your link and the highslide worked well.
after having a conversaition with Travis – i got it worked. 🙂
- The topic ‘[Plugin: NextGEN Gallery] Highslide JS effect – how to make it work with Nextgen’ is closed to new replies.