This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
May 07, 2010 11:55am
Subscribe [2]#1 / May 07, 2010 11:55am
Hi,
I want to be able to have a banner on a site with approx. five images/captions that will rotate and can be selected to take to another part of site.
Based on: http://www.medint.com
I know that I can do this with the jQuery Simple Slideshow, but can I create a weblog that will allow a user to submit a new news banner to the site. So, can a weblog used for submitting new news banners to the site, be used in conjunction with a rotator. I don’t really want to hardcode news entries.
#2 / May 07, 2010 2:18pm
Hi Coop, if your jQuery rotator script simply needs your images output like this in the HTML:
<div id="rotate">
<img scr="image1.jpg" title="title" >
<img scr="image2.jpg" title="title" >
</div>Then it would be fairly easy. You’d need to install FieldFrame first which would allow you to have extra fieldgroups. Then you’d need to install the nGen File Field which allows you to upload images. Finally, you’d need to (purchase and) install FF Matrix which allows you to create a matrix of file uploads.
Create a new field group, then create a new custom field of type Matrix. In there you can set it to accept a matrix of nGen File fields. Assign this field group to a weblog and when you publish you will easily be able to upload multiple files. When editing, you can remove, add or change the order that the images will be loaded.
This video should give you a nice summary too: http://eeinsider.com/videos/show/quick-look-at-pixel-tonic-matrix/
Hope that helps.
#3 / May 07, 2010 4:46pm
i don’t really see a need to use fieldframe or matrix for this, sure it would look cleaner but it’s pretty unnecessary. i do this frequently and use a weblog called “feature” with fields of
image, link, caption
then my code would look something like
{if link}{/if}{image}{if link}{/if}
#4 / May 07, 2010 4:49pm
jared is correct, as with many things in EE, it can be accomplished in a few ways. My implementation would make it really easy for clients to update and make changes. It’s exactly the solution that I implemented for a client a few days ago and they didn’t mind paying the extra cost for the Matrix plugin because it’ll make it easy for them to update.
#5 / May 10, 2010 10:39am
Hi,
I decided to just create a weblog with all the information I would need to create the slideshow.
Thanks for your help.
I have been looking at this rotator for two days now on and off, and can’t seem to figure out what isn’t working. It doesn’t want to change slides, and I have zero idea why. Everything seems to work fine in the javascrpit and everything. And ideas? Not sure if this is the place to post this or not?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<META http-equiv="Content-Style-Type" content="text/css"/>
<title>Document CSS</title>
<style type="text/css">
#slideshow {
position:relative;
height:350px;
}
#slideshow A {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow A.active {
z-index:10;
}
#slideshow A.last-active {
z-index:9;
}
</style>
</head>
<body>
[removed][removed]
[removed]
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :blush:
***/
function slideSwitch() {
var $active = $('#slideshow A.active');
if ( $active.length == 0 ) $active = $('#slideshow A:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow A:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$( function() {
setInterval( "slideSwitch()", 3000 );
});
[removed]
<div id="slideshow">
<a href="http://www.google.ca/" class="active">http://www.medint.com/images/slideshow1.jpg</a>
<a href="http://www.google.ca/">http://www.medint.com/images/slideshow2.jpg</a>
<a href="http://www.google.ca/">http://www.medint.com/images/slideshow3.jpg</a>
<a href="http://www.google.ca/">http://www.medint.com/images/slideshow4.jpg</a>
</div>
</body>
</html>#6 / May 10, 2010 11:12am
it doesn’t look like you’re linking to jquery anywhere. without the jquery library, jquery plugins won’t do anything.
hmm actually you may have been. didn’t realize the forums take down script tags. either way, when i add the jquery library, it works just fine.
#7 / May 10, 2010 1:40pm
Hi,
Well this is kind of embarrasing, but I was pointing my [removed] at the wrong file location. Now it is pointing at the right place and everything works. I hate when I am trying to get to the bottom of something and end up overlooking the little things.
Thanks for your help.
#8 / May 10, 2010 4:01pm
Coop, you may have done this, but what I do is ensure everything’s working before doing anything in EE by coding up some static information first. In this case it would have been linking to some images and just ensuring that the slideshow was working, and then use EE to insert the image data.
This helps by allowing me to decide if it’s a jQuery issue (when things aren’t working with static data) or an EE issue (when things stop working after I move into EE).