I think you have the right idea. Create a new slideshow and use its ‘slug’ in the shortcode on a Page.
Assume that you add a slideshow named ‘Second Slideshow’ at Admin->Slides->Slideshows. The ‘slug’ for that slideshow will be ‘second-slideshow’.
The shortcode that you put in the Page will be this:
[meteor_slideshow slideshow="second-slideshow"]
I have created 3 slideshows: “home”, “home2”, “home3” – they are all on the same page. I would like to float “home” and “home3” left and float “home2” right with text wrapped around each of the slideshows. I also want a margin to add space between the slideshows and the text. My best guess is that I should insert this CSS into my theme? I’ve been trying to make this work for 5 hours and i’m going craaaaazy!
<?php if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(“home”,””); } ?>
.meteor-slides {
margin: 0 20px 0 0;
padding: 0;
position: relative;
z-index: 1;
overflow: hidden;
float: left;
}
<?php if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(“home2″,””); } ?>
.meteor-slides {
margin: 0 20px 0 0;
padding: 0;
position: relative;
z-index: 1;
overflow: hidden;
float: right;
}
<?php if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(“home3″,””); } ?>
.meteor-slides {
margin: 0 20px 0 0;
padding: 0;
position: relative;
z-index: 1;
overflow: hidden;
float: left;
}
Yes, you need to insert the CSS into your theme, but it doesn’t go into the template files with the slideshow template tags, it goes in your theme’s stylesheet, style.css.
Currently, all three of those CSS statements use the slideshow container’s class, .meteor-slides, which would target all the slideshows on your site. If you have three statements with the same target like that, the last one in your stylesheet will be applied, overriding the two previous statements.
To target a specific slideshow, use that slideshow’s ID instead. Each slideshow’s ID is “meteor-slideshow” plus the slug of the slideshow, so the “home” slideshow’s ID would be “meteor-slideshowhome”, and you could target it like this:
#meteor-slideshowhome {
margin: 0 20px 0 0;
padding: 0;
position: relative;
z-index: 1;
overflow: hidden;
float: left;
}
