更新web2py中的图像

Question

I have a more special question.

It is really simple to display an image in an html tag. I have done it by returning the sql file in a dict to the same named html file, which embed it in the tag with the following code:

<img width="400px" src = "{{=URL('download_image', args = image_vid.file)}}" /> 

My problem is now, that i am really confused. I have an image database in model and i have made two buttons to switch between this. The switching is simply done on this way

<button name="previousButton" type="button"
    value="Überraschung1" onclick="{{if session.currentImVidID >  session.currentLenImVid:}}
                                  {{session.currentImVidID = session.currentImVidID - 1}}   
                                  {{else:}}
                                  {{session.currentImVidID = session.currentLenImVid - 1}}
                                  {{redirect(URL('show_image_video'))}}
                                  {{pass}}">                                  
        previous file
</button>

but i always have to refresh the browser tab to see the new chosen pic.

I have seen that it would be possible to use java script for updating while the html is displayed without refreshing. But i am confused. How it would be possible to access from javascript to the new chosen file overgiven from the controller functions?

By the way, i am a noob and i hope that i have posed the question in a good way.

Thank you!

Answer 1

I suggest you use a javascript slider (there are tons in Codecanyon or Github). Normally you need to generate a template like this in Web2py:

<div id="slider">
    <img width="400px" src = "img1" />
    <img width="400px" src = "img2"/>
    <img width="400px" src = "img2"/>
    ...
</div>

Then you use something like this at the bottom of your template:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').activate();
});
</script>