Links on images

[ffg@ffgraphics.com]

Does anybody know how I would add a link to the images associated with MagicSlideShow?

I tried the following (see the second image) which is how I have done it in other slideshows but it just seemed to make the image disappear.
<div class="MagicSlideshow" id="slideshow1">
                <img src="~/Assets/carousel-livingaids.jpg"/>
   <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-medicalcoolers.jpg"/></a>>
   <img src="~/Assets/carousel-pillboxes.jpg"/>
   <img src="~/Assets/carousel-portion.jpg"/>
   <img src="~/Assets/carousel-accessories.jpg"/>
   <img src="~/Assets/carousel-giftideas.jpg"/>
</div>

I have use-links set to yes and links-window set to _self.

[Alex]

Hi,

You are on the right way. You just need to use the code of the second image for all images, i.e. <a><img></a>.

Also, there is a typo in this code, please remove the last ">" char:

Code:

  <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-medicalcoolers.jpg"/></a>>

All the best,

Alex

[ffg@ffgraphics.com]

Sometimes all it takes is another eye. I totally missed the extra bracket.

Thanks!

[ffg@ffgraphics.com]

Ok. I have the links working with the following code and options.
Now I want to add thumbnails but couldn't figure out from the examples how to do both. When I added the CSS from the I just got a couple of numbers at the top of the images. If I use the thumbnail link, I lose the link for the image. Is there any way to do both? 

<div class="MagicSlideshow" id="slideshow1">
                <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-livingaids.jpg"/</a>
   <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-medicalcoolers.jpg"/></a>
   <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-pillboxes.jpg"/></a>
   <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-portion.jpg"/></a>
   <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-accessories.jpg"/</a>
   <a href="http://www.diabetesandmore.com"><img src="~/Assets/carousel-giftideas.jpg"/</a>
</div>
 'container-position':'bottom',
 'thumbnail-opacity':'0.5',
 'effect':'fade',
 'effect-next':'fade',
 'effect-jump':'fade',
 'text-delay':'0.3',
 'text-opacity':'0.3',
 'loop': 'yes',
 'loop-type' : 'first',
 'loading-text':'Loading',
 'use-links': 'Yes',
 'links-window': '_self'

[Alex]

Hi ffg,

Here you go:

1. Set an explicit position of thumbnails (inside/outside), e.g.

    'thumbnails': 'outside'

2. Set an explicit size of the thumbnails, e.g.

    'container-size': '50'

Your code will look like so:

Code:

    MagicSlideshow.options = {
'thumbnails': 'outside',
'container-size': '50',
'container-position':'bottom',
'thumbnail-opacity':'0.5',
'effect':'fade',
'effect-next':'fade',
'effect-jump':'fade',
'text-delay':'0.3',
'text-opacity':'0.3',
'loop': 'yes',
'loop-type' : 'first',
'loading-text':'Loading',
'use-links': 'Yes',
'links-window': '_self'
    }

Hope that helps!

Alex

[ffg@ffgraphics.com]

Never mind. I figured it out.

But I have another question. Is there any way to control the size of the thumbnails?

[Alex]

Well done, ffg!

Please use the 'container-size' parameter to control thumbnails size.

Thank,

Alex

[ffg@ffgraphics.com]

You were so helpful!

If you ever have a customer that wants to know how to implement the slide show into Able Commerce, I have now done it.

[Alex]

Hi ffg,

That is great! We will much appreciate if you could provide us with the integration instructions for Able Commerce.

Many thanks,

Alex

[bohdans]

You were so helpful!

If you ever have a customer that wants to know how to implement the slide show into Able Commerce, I have now done it.

Hi. Can show how you got the link to work with a slide show that has thumbnails
In example7.html they have two slide shows, one with thumbnails and one without.
I can add a link when no thumbnails are used. But I can't figure out how to do it when thumbnails are used in the example.

Example7.html

.
       <div class="MagicSlideshow" id="slideshow1">
            <a rel="images/sony-bravia.jpg"><img src="images/sony-bravia2.jpg" /></a>
            <a rel="images/sony-cybershot.jpg"><img src="images/sony-cybershot2.jpg" /></a>
            <a rel="images/sony-phone.jpg"><img src="images/sony-phone2.jpg" /></a>
.            <a rel="images/sony-reader.jpg"><img src="images/sony-reader2.jpg" /></a>
            <a rel="images/sony-readerA.jpg"><img src="images/sony-readerA2.jpg" /></a>
            <a rel="images/sony-vaio.jpg"><img src="images/sony-vaio2.jpg" /></a>
        </div>
.
       <div class="MagicSlideshow" id="slideshow2">
           <img src="images/fruits_apples.jpg" />
           <img src="images/fruits_grapefruit.jpg" />
            <img src="images/fruits_lime.jpg" />
            <img src="images/fruits_raspberry.jpg" />
.            <img src="images/fruits_strawberry.jpg" />
        </div>

[Alex]

Hi bohdans,

To link an image to a specific URL you just need to add a HREF attribute to the <A> tag:

   http://www.magictoolbox.com/magicslideshow_integration/#linkurl

For example, the code in the example 7 will look like so:

1. With thumbnails

Code:

       <div class="MagicSlideshow" id="slideshow1">
            <a href="http://your-link-goes-here" rel="images/sony-bravia.jpg"><img src="images/sony-bravia2.jpg" /></a>
            <a href="http://your-link-goes-here" rel="images/sony-cybershot.jpg"><img src="images/sony-cybershot2.jpg" /></a>
            <a href="http://your-link-goes-here" rel="images/sony-phone.jpg"><img src="images/sony-phone2.jpg" /></a>
            <a href="http://your-link-goes-here" rel="images/sony-reader.jpg"><img src="images/sony-reader2.jpg" /></a>
            <a href="http://your-link-goes-here" rel="images/sony-readerA.jpg"><img src="images/sony-readerA2.jpg" /></a>
            <a href="http://your-link-goes-here" rel="images/sony-vaio.jpg"><img src="images/sony-vaio2.jpg" /></a>
        </div>

2. Without thumbnails

Code:

       <div class="MagicSlideshow" id="slideshow2">
           <a href="http://your-link-goes-here" ><img src="images/fruits_apples.jpg" /></a>
           <a href="http://your-link-goes-here" ><img src="images/fruits_grapefruit.jpg" /></a>
           <a href="http://your-link-goes-here" ><img src="images/fruits_lime.jpg" /></a>
           <a href="http://your-link-goes-here" ><img src="images/fruits_raspberry.jpg" /></a>
           <a href="http://your-link-goes-here" ><img src="images/fruits_strawberry.jpg" /></a>
        </div>

Kind regards,

Alex