jQuery slider and C5
Permalink
Hi guys,
I'm kind of new to C5 so please bare with me. I have 10 pages with 1 jquery slider already built with 10 slides in it and 10 thumbnails.
I've searched around for a while and couldn't find anything to help me with my dilemma.
What is the best way for me to build this into the CMS so it's easy for my client to edit/add images?
Thanks for your time!
I'm kind of new to C5 so please bare with me. I have 10 pages with 1 jquery slider already built with 10 slides in it and 10 thumbnails.
I've searched around for a while and couldn't find anything to help me with my dilemma.
What is the best way for me to build this into the CMS so it's easy for my client to edit/add images?
Thanks for your time!
I already have the slider built with jquery and html, all stylized. If I would have found C5 before I built it I would have definitely looked into those solutions.
If what you're after is a block that can be added to any area on any page in your site by your users, then I would agree with @bentvision that you're best off spending the $15-25 in the marketplace for one that's already built.
BUT, if this slideshow is only going to appear on one place in your site (for example, it's the home page slideshow and it doesn't go anywhere else except that one spot on the home page), and since you already have the html/js for the slideshow, you could very easily implement this by using a File Set.
First you want to put the slideshow into your theme template -- you'll need to make a page type specifically for the page that has the slideshow in it (again, this is only going to really work if you know the slideshow is to exist in one location in your site). In that page type template, put all of the html you have and make sure you're including the needed javascript. Get it working with your 10 sample images first, so if you run into problems in the next step you know it's not due to the slideshow HTML/JS itself.
Next, you put this code near the top of your template (anywhere before you have the <img> tags for the slideshow):
Now the $images variable is an array containing all the images in the file set (you'd have to figure out what the file set id is -- create the file set in the Dashboard File Manager, then click to edit it and you should see its number up in the URL of the edit page).
Next you need to replace whatever the 10 images you had before with some PHP code that will loop through the file set images and output them as <img> tags (this will need to vary depending on how exactly your slideshow is set up):
Note that I'm assuming all images are the same size (since this is a slideshow). If for some reason you need to get the actual image size, that's possible too (but the code is a bit more complicated so I'm leaving it out for now).
Next up are the thumbnails. You want to do a similar thing as above, but you can have the system generate the thumbnails for you. Note that again we're assuming all of the source images are the same size because otherwise your thumbnails will be different sizes as well (the next version of C5 will include cropping ability but for now this should be good enough):
Now you tell your users to add/remove images from the designated file set (and they can change the order of them as well by editing the file set from the file manager), and the slideshow will automatically reflect that.
Hope that helps!
-Jordan
BUT, if this slideshow is only going to appear on one place in your site (for example, it's the home page slideshow and it doesn't go anywhere else except that one spot on the home page), and since you already have the html/js for the slideshow, you could very easily implement this by using a File Set.
First you want to put the slideshow into your theme template -- you'll need to make a page type specifically for the page that has the slideshow in it (again, this is only going to really work if you know the slideshow is to exist in one location in your site). In that page type template, put all of the html you have and make sure you're including the needed javascript. Get it working with your 10 sample images first, so if you run into problems in the next step you know it's not due to the slideshow HTML/JS itself.
Next, you put this code near the top of your template (anywhere before you have the <img> tags for the slideshow):
<?php $fileSetID = 1; //<-- change this to the file set id you want to use Loader::model('file_set'); Loader::model('file_list'); $fs = FileSet::getByID($fileSetID); $fl = new FileList(); $fl->filterBySet($fs); $fl->filterByType(FileType::T_IMAGE); $fl->sortByFileSetDisplayOrder(); $images = $fl->get(); ?>
Now the $images variable is an array containing all the images in the file set (you'd have to figure out what the file set id is -- create the file set in the Dashboard File Manager, then click to edit it and you should see its number up in the URL of the edit page).
Next you need to replace whatever the 10 images you had before with some PHP code that will loop through the file set images and output them as <img> tags (this will need to vary depending on how exactly your slideshow is set up):
<?php foreach ($images as $img): ?> <img src="<?php echo $img->getRelativePath(); ?>" width="800" height="600" alt="" /> <?php endforeach; ?>
Note that I'm assuming all images are the same size (since this is a slideshow). If for some reason you need to get the actual image size, that's possible too (but the code is a bit more complicated so I'm leaving it out for now).
Next up are the thumbnails. You want to do a similar thing as above, but you can have the system generate the thumbnails for you. Note that again we're assuming all of the source images are the same size because otherwise your thumbnails will be different sizes as well (the next version of C5 will include cropping ability but for now this should be good enough):
<?php $ih = Loader::helper('image'); foreach ($images as $img) { $thumb = $ih->getThumbnail($img, 40, 30); //<-- set these 2 numbers to max width and height of thumbnails echo "<img src=\"{$thumb->src}\" width=\"{$thumb->width}\" height=\"{$thumb->height}\" alt=\"\" />"; } ?>
Now you tell your users to add/remove images from the designated file set (and they can change the order of them as well by editing the file set from the file manager), and the slideshow will automatically reflect that.
Hope that helps!
-Jordan
Thank you so much for your help. I'm glad this community is so helpful.
I have 10 different slideshows throughout my site. Each one has 10 slides in it. Will this still work for all of them?
I have 10 different slideshows throughout my site. Each one has 10 slides in it. Will this still work for all of them?
Kinda sorta but not really (it could work technically but you would be defeating the whole purpose of the block system and it would not be easy to manage for you or your users).
Hmm... how much PHP do you know? I'm attaching a slideshow block I made for demonstration purposes -- the code is very simplified. It's using the Coin Slider effect, but it is meant to be swapped out with something else. If you don't know PHP at all, can you post your slideshow's HTML/JS (or send it to me) -- depending on how complex it is I *might* be able to plug it in for you (no promises, though -- depends on how your slideshow is set up).
Hmm... how much PHP do you know? I'm attaching a slideshow block I made for demonstration purposes -- the code is very simplified. It's using the Coin Slider effect, but it is meant to be swapped out with something else. If you don't know PHP at all, can you post your slideshow's HTML/JS (or send it to me) -- depending on how complex it is I *might* be able to plug it in for you (no promises, though -- depends on how your slideshow is set up).
PM'd you some information.
Thanks again.
Thanks again.
There are many other slider options in the marketplace that may work just as well for you.
Other than that, you are really looking at giving someone access to your HTML template and have FTP access to a directory to house the images. That's not really the best approach.
Go with one of the sliders in the marketplace and you can't go wrong.
Good luck.