Jump to:

23450 Posts in 18899 Topics by 2877 members

General Questions

SilverStripe Forums » General Questions » Replace big img Javascript problem

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

Page: 1 2 3
Go to End
Author Topic: 3953 Views
  • frabraha
    Avatar
    Community Member
    49 Posts

    Replace big img Javascript problem Link to this post

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

  • Dave L
    Avatar
    Community Member
    56 Posts

    Re: Replace big img Javascript problem Link to this post

    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.

  • frabraha
    Avatar
    Community Member
    49 Posts

    Re: Replace big img Javascript problem Link to this post

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

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Replace big img Javascript problem Link to this post

    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>

  • frabraha
    Avatar
    Community Member
    49 Posts

    Re: Replace big img Javascript problem Link to this post

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

  • frabraha
    Avatar
    Community Member
    49 Posts

    Re: Replace big img Javascript problem Link to this post

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

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Replace big img Javascript problem Link to this post

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

  • frabraha
    Avatar
    Community Member
    49 Posts

    Re: Replace big img Javascript problem Link to this post

    Yes, downloaded all of them and tried them.

    Have tried the jQuery bundled with SilverStripe to..

    3953 Views
Page: 1 2 3
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.