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
Reply


18 Posts   4051 Views

Avatar
frabraha

Community Member, 49 Posts

19 November 2009 at 12:07am

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;
}
</script>   


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 %>

Avatar
Dave L

Community Member, 56 Posts

19 November 2009 at 2:02am

Edited: 19/11/2009 2:04am

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.

Avatar
frabraha

Community Member, 49 Posts

19 November 2009 at 2:10am

"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...

Avatar
banal

Community Member, 901 Posts

19 November 2009 at 2:27am

Why not use an existing plugin for jQuery? Something like this:
http://devkick.com/lab/galleria/demo_01.htm

.. and here's the documentation on how to implement it (scroll down to "Usage" section):
http://devkick.com/lab/galleria/

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 %>
</ul>

Avatar
frabraha

Community Member, 49 Posts

19 November 2009 at 2:32am

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

Avatar
frabraha

Community Member, 49 Posts

19 November 2009 at 10:33pm

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...

Avatar
banal

Community Member, 901 Posts

19 November 2009 at 11:37pm

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>
....

Avatar
frabraha

Community Member, 49 Posts

19 November 2009 at 11:51pm

Yes, downloaded all of them and tried them.

Have tried the jQuery bundled with SilverStripe to..

Go to Top