Информация > идея > ресурсы > опыт > результат

Балашиха (Железнодорожный), Москва
+7 (903) 978-3464

Highslide integration with WordPress

How integrate Highslide image effect into WordPress?

I placed this script of image effect into my template folder and named new folder as «highslide». I use variation «highslide with gallery».
1. Add into your header.php before tag </head> this lines:
[code]<script type=»text/javascript» src=»<?php bloginfo(‘template_directory’); ?>/highslide/highslide-with-gallery.js»></script>
<!—[if lt IE 7]>
<link rel=»stylesheet» type=»text/css» href=»<?php bloginfo(‘template_directory’); ?>/highslide/highslide-ie6.css» />
<script type=»text/javascript»>
hs.graphicsDir = ‘<?php bloginfo(‘template_directory’); ?>/highslide/graphics/’;
hs.align = ‘center’;
hs.transitions = [‘expand’, ‘crossfade’];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.wrapperClassName = ‘borderless floating-caption’;
hs.captionEval = ‘this.thumb.alt’;
hs.marginLeft = 100; // make room for the thumbstrip
hs.marginBottom = 80 // make room for the controls and the floating caption
hs.numberPosition = ‘caption’;
hs.lang.number = ‘%1/%2’;

// Add the slideshow providing the controlbar and the thumbstrip
//slideshowGroup: ‘group1’,
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: ‘text-controls’,
position: ‘bottom center’,
relativeTo: ‘viewport’,
offsetX: 50,
offsetY: -5
thumbstrip: {
position: ‘middle left’,
mode: ‘vertical’,
relativeTo: ‘viewport’
// Add the simple close button
html: ‘<div class=»closebutton» onclick=»return hs.close(this)» title=»Close»></div>’,
position: ‘top right’,
fade: 2 // fading the semi-transparent overlay looks bad in IE

2.  Insert in to the function.php file from your theme folder this lines before «?>«:


define(«IMAGE_FILETYPE», «(bmp|gif|jpeg|jpg|png)», true);

function addhighsliderel_replace($string) {

$pattern = ‘/<a(.*?)href=»(.*?).(bmp|gif|jpeg|jpg|png)»(.*?)>/i’;

$replacement = ‘<a$1href=»$2.$3″ onclick=»return hs.expand(this)» rel=’highslide’ class=’highslide’$4>’ ;

return preg_replace($pattern, $replacement, $string);


add_filter(‘the_content’, ‘addhighsliderel_replace’);[/code]

3. Correct your highslide.css file:

[code].highslide-thumbstrip-vertical img {
max-width: 60px;
max-height: 60px;

Finished. Now everything images will be opened with this nice effect, as in my site.

Оставить комментарий