Question

Code
(Note that the result will not display properly without the images referenced)

I’m a student worker at a University with some programming experience. My boss wants me to make a slideshow similar to the one that can be seen here. I don’t know anything about Javascript or jQuery other than the basic W3 schools tutorials so I decided to get code from outside sources to modify for my own purposes.

Two issues have arisen with this build of the code.
My first problem is the simpler of the two.

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(<img src="img\rssSmall.jpg" />)"></a>

I’m trying to make little thumbnail images at the bottom of the slideshow to tab between slides. Unfortunately due to nested quotes the IDE (Aptana if it matters) interprets the coded quotes as

"$('.slideshow').blinds_change(<img src="

and

" />)"

Thus it displays ” />)” instead of the proper thumbnail image.

My second problem is making each slide into a link. For some reason a simple tag doesn’t work.

<li><a href="http:\\google.com"><img class="slide" src="img\sakaiupgrade.png" alt="Whats new in Sakai?" /></a></li>

I assume this has more to do with the Javascript/jQuery side of things, which is way above my head at the moment.

Thanks in advance for any help you can give me!

If you want to throw in some images yourself the size is w500 h350 for the slides and w77 h54 for the tabs. Or I could try uploading all the relevant images if need be.

Answer 1

You need to add this to the head of your page, underneath the <script tags.

This will start off the blinds process.

<script language="javascript">

    $(document).ready(function()
    {
    $(".slidehsow").blinds();
    });


</script>

Next, you <a links are find, however if you’d like to add a thumbnail change them to:

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)"><img src="img/somethingThumbnail.jpg" alt="Link to Slide 1" /></a>

And as they, job’s a carrot!

So you main images are contained within the <li> elements and the thumbnails are within the <a elements.

---

Edit for Question 2

Looking through the jQuery blinds code, there’s no means for it to translate the <li> items into proper links – as the images are changed to a background image of a new div.

You’ll need to edit the jquery.blinds-0.9.js file, like so:

Line 49 becomes:

blinds_images[blinds_images.length] = { 'title': e.alt, 'src': e.src, 'href': $(this).parent().attr("href") }

This add the parent elements (the the image) href attribute to the array.

Line 89 becomes:

,'cursor': 'pointer'

This means the mouse will become link a link pointer when over the image

Insert this line into line 91:

tile.click(function (e) { window.location = blinds_images[0]['href']; });

This set’s up the default link from the first tile.

Finally, line 115 (or 114 before inserted line) becomes:

$(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat').click(function (e) { window.location = config.images[config.img_index]['href']; });

Again, this picks up the href and directs the browser there when clicked for a particular slide.

With these changes, you’re usual code of <li><a href="somelink.htm"><img src="someIMage.png" /></a></li> will work as expected.

CAVEAT I’ve not tested this without the <a elements, so the list items without links will either need an empty one (maybe) or the jQuery code will need to be tweaked further to capture any null values.