Picture Galleries

  • 2
  • Question
  • Updated 8 years ago
Any body got any suggestions on how you can present photos in a more interesting way. I don't like the idea of links out to flickr. Is there not a nice way of presenting them within Yola?
Photo of David Brougham

David Brougham

  • 12 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 2
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello! Yola has the "SmugMug" Gallery that you might like. It is next to the Flickr widget in the "Multimedia" category on the sidebar.

Let me know if you have any problems with this.

Thanks,
Nathan
Photo of David Brougham

David Brougham

  • 12 Posts
  • 0 Reply Likes
Does this link photos to another site or does it leave users on your own site do you know? What I'm after is a type of slide show gallary widget.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello, the Smug Mug gallery links to pictures on other sites but this script I posted below is right in your site without any third-party service involved.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi David

So you want one of those without using a third-party service. You can use a custom HTML one and then add in the images in the array.

So here is the code. Drag over an HTML widget and paste this into it:

<script type="text/javascript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();

// to add more images, just continue the pattern, adding to the array below

Pic[0] = 'resources/YOURIMAGE.jpg'
Pic[1] = 'resources/YOURIMAGE.jpg'
Pic[2] = 'resources/YOURIMAGE.jpg'
Pic[3] = 'resources/YOURIMAGE.jpg'
Pic[4] = 'resources/YOURIMAGE.jpg'
Pic[5] = 'resources/YOURIMAGE.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>

<body onload="runSlideShow()"></body>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>
</td>
</tr>
</table>


Now, if you need to add more images just follow the pattern that you see and change all of the URLs of the image but keep the resources/ in front and then put the image name with the file extension (usually .jpeg or .jpg, but it depends) Just look in your file manager to get the name of the image.

For example if you want a 7th image, do this:

...
Pic[6] = 'resources/YOURIMAGE.jpg'
...

If you see, it is just a pattern, so just keep counting down for each new image.

This might be a little too confusing for you so let me know if it is and I will help you out and if you want me to I can even put all of the images in for you, but you will just need to tell me the name of the images.

I hope this helps.

Sincerely,
Nathan
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hello David,

If you decide you want to add a Smugmug gallery to your site you can do so as follows:

Follow these steps to add a SmugMug gallery to your page:

1. Register on http://www.smugmug.com/ and upload your pictures by creating a gallery.
2. Click on the "Multimedia" folder and drag and drop the SmugMug Gallery Widget onto your page.
3. A dialog box will appear.
4. Delete the existing URL and replace it with your own from SmugMug (or browse SmugMug for the one you want to use), the URL should look something like http://yoursite.smugmug.com/gallery/5...
5. If you click on "Settings" next to the URL field, you will be able to set the width, height and alignment of the gallery.
6. Click on "Save"

I hope this helps.