WordPress › Support » [Plugin: NextGEN Gallery] Rotating headers (pictures won't show up)

Athos25
Member
Posted 3 years ago #
First of, thanks for such a great plugin. I'm trying to use it for something it wasn't originally designed for, but my guess is it ought to work.

What I would like to do is use the nextGen gallery plugin to display rotating header images on my blog. So here is what I've done thus far.

I created a new Gallery (ID=2), containing several images I want to show in the header. In my header.php file I have the following code:

<div id="header_image"> </div>

By using CSS I apply the correct width and height (800 and 180px) and add a background image. This is the part I would like to replace.

Next step is I looked at the code of the slideshow and grabbed the JS needed for starting it:
```
<div id="header_image">&nbsp;</div>
<script type="text/javascript" defer="defer">
var header_image = {
	params : {
		wmode : "opaque",
		allowfullscreen : "true",
		bgcolor : "#FFFFFF"},
	flashvars : {
		file : "http://localhost/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=2",
		shuffle : "false",
		linkfromdisplay : "true",
		overstretch : "true",
		rotatetime : "10",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		screencolor : "0xFFFFFF",
		width : "800",
		height : "180"},
	attr : {
		styleclass : "slideshow",
		name : "header_image"},
	start : function() {
		swfobject.embedSWF("http://localhost/wp-content/uploads/imagerotator.swf", "header_image", "800", "180", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
header_image.start();
</script>
```
As you can see, to prevent problems I changed the call to the function to header_image and I try to inject the flash into the div header_image. I set the gallery ID == 2 so as far as I can see I'm all set.

However, nothing is displayed. The div just disappears, the contents shift up, but there is no rotating header. So I'm left wondering here: what I'm a doing wrong?

The slideshow does turn up on single pages I create, so the settings of the various files seems to be ok.

Thanks for the replies.

Athos25
Member
Posted 3 years ago #

Aha, I've seem to have fix it. The solution was quite easy: rename the div to inject into and add a name attribute. I also added some extra variables to stop navigation and other stuff from showing up.

<div id="header_image_rotate" name="header_image_rotate"></div>
<script type="text/javascript" defer="defer">
var header_image = {
	params : {
		wmode : "opaque",
		allowfullscreen : "false",
		bgcolor : "#FFFFFF"},
	flashvars : {
		file : "http://localhost/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=2",
		shuffle : "false",
		showicons : "false",
		transition : "bgfade",
		shownavigation : "false",
		linkfromdisplay : "false",
		overstretch : "true",
		rotatetime : "20",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		screencolor : "0xFFFFFF",
		width : "880",
		height : "155"},
	attr : {
		styleclass : "slideshow",
		name : "so1"},
	start : function() {
		swfobject.embedSWF("http://localhost/wp-content/plugins/nextgen-gallery/imagerotator.swf", "header_image_rotate", "880", "155", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
header_image.start();
</script>

ajg
Member
Posted 3 years ago #

It used to be really simple.
just add
<?php echo nggShowSlideshow(galleryID,width,height) ?>

And thats it.

<?php echo nggShowSlideshow(22,625,100) ?>
Athos25
Member
Posted 3 years ago #

ow, that is really simple indeed. But does it set the correct options as well?

showicons : "false",
transition : "bgfade",
shownavigation : "false",
overstretch : "true",
Athos25
Member
Posted 3 years ago #

/double post
gkideas
Member
Posted 3 years ago #

Can you show me how that's done?
I have a remix theme and can't figure out how to add that code.

I can easily add a slideshow on a page, but not on this part, which is not part of the header either.

Here is the page I'm working on - I want to replace the green leaf with the slideshow, however everything is coded in the css files that aren't accessible via the theme editor in WP.

http://antiagingreviewsite.com/eco/

I have spent hours trying to figure this out - I know it can't be THAT hard, but I really don't have the time to mess with it anymore.

I'll gladly pay someone just tell me exactly what code and exactly where to put it!

Thanks!
GiGi
ajg
Member
Posted 3 years ago #

Athos25, take a look at this: http://www.ajakirigolf.ee/
transition : "bgfade",
shownavigation : "false",
overstretch : "true",
... and so on are set from the nexgen gallery admin menu

gkideas, you need to get this code inside the "content-wrap" div so that it covers the leaf. You probably need to add a new style to your css, so the gallery is moved to right place.
Athos25
Member
Posted 3 years ago #

@gkideas, basically my first two posts explain most of the settings I performed to achieve this effect.

However, based upon the code from ajg I guess I might have taken the difficult route (reason for this follows). I'm however not familiar with the theme editor of WP since I code most of it by hand using either Notepad++ or PHPDesigner.

@ajg: yes, I'm aware you can set stuff through the adminpanel, but those are global settings. This means that every slide show has this setting inside NG Gallery. The reason I took the hard approach is to control the output for the headers more precise. It also allows me to add some code for IE6 so the size of the header is more or less correct.

It might be true this is the hard route, but in the long run provides me with more flexibility.
RAULOR
Member
Posted 3 years ago #

Best way...

<?php
$showgallery = '[slideshow=1]';
$showgallery = apply_filters('the_content', $showgallery );
echo $showgallery;
?>

Adjust the NGG Options/Slideshow/size According to your theme spec's, , also the fading effect...and of course [slideshow=X] X=Your Gallery number

simple?
RAULOR
Member
Posted 3 years ago #

However, you are right Athos, the long way is more dedicated to specific and not global options, when related to fading, etc.

I am looking to do a similar thing, but setting the header slide show in the background, meaning, any text like blog desc or Title would appear in as a front layer with transparency, unfortunately my theme (and I do not want to change it for business related issues), works with a background: url(images/picture.jpg) in the CSS, and do not want to take the PHP code neither the [slideshow=X] option....Any body knows how?

Thanks in advance

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[Plugin: NextGEN Gallery] Rotating headers (pictures won't show up) (10 posts)

Topic Closed

About this Topic

Tags

Code is Poetry