Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Replace big img Javascript problem

Go to End

18 Posts   4015 Views


19 November 2009 at 12:07am Community Member, 49 Posts

I have a gallery with on big image, and small thumbnails. And when I click on one of the small thumbnails the big image should be replaced with a big image version of the small thumbnail I clicked on.

For that I have a little javascript function that I got working, but the problem I have now is that I can't get it to replace the big image version of the thumbnail you clicked on, it just replace the big image with the thumbnail size you have clicked on.

could somebody help me out with this?
I'm open for other suggestion on how to do this if there are any..

Javascript code:

<script type="text/javascript">
function chgBigImg( img ){
var bigImg = document.getElementById( "Big-img" );
var src = img.src;
bigImg.src = src;

Template code big image:

<% control Attachment %>
<% control SetWidth(470) %>
<img src="$URL" alt="$Title" id="Big-img" />
<% end_control %>
<% end_control %>

Template code small thumbnails:

<% control Attachment %>
<% control SetWidth(70) %>
<img src="$URL" alt="$Title" onclick="chgBigImg(this); return false;" />
<% end_control %>
<% end_control %>

Dave L

19 November 2009 at 2:02am (Last edited: 19 November 2009 2:04am), Community Member, 56 Posts

Using SetWidth(70) creates a new (thumbnail) image resampled to that size, instead of the original. So what you're doing is setting your Big images' source to the same as the thumbnail, not the the original. You probably don't want to have every thumbnail as a full sized image resized (e.g. call the original file and use css; style="width:70px"), so you'll have to query the server again to reload and get new image, either using the thumbnail as a link back to the server, or creating some ajax.


19 November 2009 at 2:10am Community Member, 49 Posts

"call the original file and use css; style="width:70px"), "

That's what I originaly did, it works but when the images are being sized down that much they get really nasty looking (can't think of a better word for it).

"so you'll have to query the server again to reload and get new image"

How do I do that?
Have been trying this all day but my javascript skills are very limited...


19 November 2009 at 2:27am Community Member, 901 Posts

Why not use an existing plugin for jQuery? Something like this:

.. and here's the documentation on how to implement it (scroll down to "Usage" section):

Just make sure your template generates code that's usable for the plugin. Something like this:

<ul class="gallery">
<% control Attachment %>
<li><a href="$SetWidth(470).Link" title="$Title">$SetWidth(70)</a></li>
<% end_control %>


19 November 2009 at 2:32am Community Member, 49 Posts

Thanks.. going to see if I can make this work :)


19 November 2009 at 10:33pm Community Member, 49 Posts

Trying to add the galleria, but I only get "jQuery is not defined" error.
Have followed the "Usage" section but can't get this to work...


19 November 2009 at 11:37pm Community Member, 901 Posts

Did you download and include jQuery?
You could also include the jQuery bundled with SilverStripe:

<script type="text/javascript" src="jsparty/jquery/jquery-packed.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>


19 November 2009 at 11:51pm Community Member, 49 Posts

Yes, downloaded all of them and tried them.

Have tried the jQuery bundled with SilverStripe to..

Go to Top