Colorbox Slideshow - Post ID 200295

User 2456253 Photo


Registered User
15 posts

Hi There,

Recently you helped me to get the Colorbox program working on my Visual Site Designer Site... and I was able to make it work with one basic photo. But I want to be able to to the Colorbox Slideshow (Example 1, Slideshow, Grouped Photo 1) and I am not having any luck! I don't understand how to change the coding so that it does a slideshow. I'm sure it's something quite simple, but I'm just not getting it.
Can you show me how the coding is supposed to be?

Also, I found this site (http://slodive.com/freebies/best-jquery … y-plugins/) which has a lot of really cool different slideshow options. Is it possible to make any 'j query' program work in VSD7?

Thanks for your help! I really appreciate it!

Shelley
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

You might find something on this site.;)
http://progrower.coffeecup.com
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2456253 Photo


Registered User
15 posts

I'm sorry, but I'm not seeing which option on that website is the correct one.... none of them seem to be for what I'm trying to do, which is specifically the Colorbox Slideshow, Example 1, Grouped Photo 1. None of the ones on the website offer the same look that I'm trying to get.
Am I missing it?
User 38401 Photo


Senior Advisor
10,951 posts

http://visuallightbox.com/

That might be what you're looking for, or that company does have other software that gives a lot of different options for slideshows and lightboxes etc.
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Add your colorbox files to a folder called colorbox
colorbox.css and colorbox.jquery.js
inside the colorbox folder make a folder called images and add the images that were included with the colorbox script.
Add your photos to a folder called photos.
As long as the colorbox and photos folders are in the same directory everything will work.
Header html

<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".group4").colorbox({rel:'group4', slideshow:true});

});
</script>

Body HTML

<a class="group4" href="photos/photo1.jpg" title="My cool photo #1">Photo 1</a>
<a class="group4" href="photos/photo2.jpg" title="My cool photo #2">Photo 2</a>
<a class="group4" href="photos/photo3.jpg" title="My cool photo #3">Photo 3</a>


Here's a working example.;)

http://progrower.coffeecup.com/colorboxslideshow.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2456253 Photo


Registered User
15 posts

Rolly,
Okay, I did all that, exactly. But it doesn't come up with the same attributes as the example slideshow. For instance, there's no frame and the screen behind it doesn't darken...
I fee like I'm taking crazy pills here... If I follow the directions listed above it should work, no?

I would just give up and use the Visual Lightbox like Jo Ann mentioned, but it doesn't have the same effect that I was hoping to get.

Okay, I'm going to start over again, from scratch. Let's see....
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

If you share a link and I can tell you what's wrong.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2456253 Photo


Registered User
15 posts

Okay Rolly,

So I wiped it all out and started from scratch and it seemed to work in 'preview' except it doesn't show a thumbnail... so I just uploaded the site and, like in the preview there is no thumbnail and now it can't find the pictures... check it out:

http://www.pacificcoastsuptours.com/Photos.html

Since it's mostly working, I have a renewed sense of hope! Now, to fix the last few problems! Sorry you're having to hold my hand on this... I'm really not that saavy with this stuff!

Thanks!
Shelley
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Here's the first problem. You added your folder to VSD and named it starting with an upper case letter. Redo your files and name them with lower case.
This is where your colorbox files are.
http://www.pacificcoastsuptours.com/Col … lorbox.css
Change it to.
http://www.pacificcoastsuptours.com/col … lorbox.css

It's best practice to not use any uppercase. It's not required but it helps eliminate these kinds of problems when your grabbing code.
Get that done then double check that you have your photos added to your site.
Your links to your images are setup with the same uppercase format.
<a class="group4" href="Colorbox/Photos/Ocotal1.jpg" title="My cool photo #1">Photo 1</a>
Change your links and make sure you add them to the folder inside your colorbox folder named photos.
<a class="group4" href="colorbox/photos/ocotal1.jpg" title="My cool photo #1">Photo 1</a>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2456253 Photo


Registered User
15 posts

I changed the files to lower case and made sure that the 'photos' folder is indeed in the colorbox folder... but it's still only showing in the preview, not to the uploaded site. And there is no thumbnail picture. Hmmmmmm.....

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.