• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3871
  • Last Modified:

Changing attribute value and refreshing loaded image

I have a document with two thumbnail images (front and rear such as a bank check). I can zoom in the front thumbnail image by displaying in the zoom a square a part of the front image from the original (large) image. Everything works so far. Clicking on the front image, swaps it with the rear and I should be able to display the zoom of the rear. However, this doesn't work. I believe the zoomingRear() attribute should be modified and supplied with a value to the custom attribute OR the zooming() needs to refresh somehow to display the other image. Any ideas how?

My images with sources from sessions:

<img style="border:1px solid #e8e8e6;" id="zoom_mw" onclick="this.src = this.src == rear() 
? front() : rear();" src='<%= Session("ImageThumbnailPathFront")%>' 
data-zoom-image='<%= Session("ImagePathFront")%>' width="500" height="250"  />

Open in new window


JQuery

<script type="text/javascript">
    function pageLoad(sender, args)
    {
     zooming()
    }
    function front() {    

        return onImg = '<%= Session("ImageThumbnailPathFront")%>'; 

    }
    function rear() {    

        return offImg = '<%= Session("ImageThumbnailPathRear")%>'; 
        zoomingRear()
     }
    function zooming() {   

        $(document).ready(function () {
            $("#zoom_mw").elevateZoom({ scrollZoom: true });
        });
    }
    function zoomingRear() {    // <-- Problematic function

        $(document).ready(function () {
            document.querySelector(data-zoom-image='<%= Session("ImagePathRear")%>').elevateZoom({ scrollZoom: true });
           // document.getElementById(
        });
    }
    function getElementByAttribute(attr, value, root) {
        root = root || document.body;
        if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
            return root;
        }
        var children = root.children, 
            element;
        for(var i = children.length; i--; ) {
            element = getElementByAttribute(attr, value, children[i]);
            if(element) {
                return element;
            }
        }
        return null;
    }

</script>

Open in new window

0
nectarios777
Asked:
nectarios777
  • 8
  • 4
1 Solution
 
Julian HansenCommented:
Your javasacript seems a bit mixed up

$(document).ready - not really using that the way it was intended. You only need to do it once - not include it in your actual function calls
You could replace your page_load / zooming functions with this and then remove the $(document).ready from the zoomingRear.

$(function() {
   $("#zoom_mw").elevateZoom({ scrollZoom: true });
});

Open in new window


However, that is not really going to solve your problem - not quite sure what to aim at here given the code you have posted - do you have a link to the page?

If not can you do a view source and post the page source here.
0
 
nectarios777Author Commented:
Julian, I'm using the example from http://www.elevateweb.co.uk/image-zoom/examples
and particularly the 'MouseWheel zoom'.
The idea is to click on the image, replace it with another one and automatically to show the zoom of the new image.
0
 
Julian HansenCommented:
This sort of works - you need to move the mouse for the zoom to refresh
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript">
var images = {
  rear : {
    thumb: 'images/00100_thm.jpg',
    full: 'images/00100.jpg',
  },
  front : {
    thumb: 'images/00300_thm.jpg',
    full: 'images/00300.jpg',
  }
}
$(function() {
  $("#zoom_01").elevateZoom({responsive: true});
  $('img').click(function() {
    var cur = $(this).attr('src');
    var indx = (cur == images['rear']['thumb']) ? 'front' : 'rear';
    $(this).attr('src', images[indx]['thumb']);
    $(this).data('zoom-image', images[indx]['full']);
    $("#zoom_01").elevateZoom();
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<img id="zoom_01" src="images/00100_thm.jpg" data-zoom-image="images/00100.jpg"/>
</body>
</html>

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
nectarios777Author Commented:
Your solution does work. However, I have added this code on a form which loads the image paths from asp.net sessions and for each record the front/rear images are different. To keep the javascript functioning I'm calling it on the  function pageLoad(sender, args) (maybe a better solution is required).
Also I'm passing each new image path to the javascript because when a new record is pulled the values within the javascript in my code were not getting updated.
How would I integrate your solution with my code?
0
 
nectarios777Author Commented:
This is the most recent vesion I have which works except the zoom:
<script type="text/javascript">

    function pageLoad(sender, args)
    {
      
        zooming();

    }
    function front( value, zoomvalue) {    
        $("#zoom_mw").attr("data-zoom-image", zoomvalue);
        var xx = value;
      return onImg = xx;
     
    }
    function rear( valuex, zoomvalue) {    
      

        $("#zoom_mw").attr("data-zoom-image", "http://www.dhakatribune.com/sites/default/files/imagecache/870x488_article_high/article/2013/07/13/front%20info.jpg");
        $("#zoom_mw").elevateZoom({ scrollZoom: true });

        var yy = valuex;
        return offImg = yy;
      
        
     }
    function zooming() {   
        
        //$(document).ready(function () {
          //  $("#zoom_mw").attr("data-zoom-image", '<%= Session("ImagePathFront")%>');
        $("#zoom_mw").elevateZoom({ scrollZoom: true });
      

       //});
    }
    function zoomingRear() { 

    }
 
   

</script>

Open in new window



<img style="border:1px solid #e8e8e6;" id="zoom_mw" 
    onclick="this.src = this.src == rear('<%= Session("ImageThumbnailPathRear")%>','<%= Session("ImagePathRear")%>' ) ? front('<%= Session("ImageThumbnailPathFront")%>', '<%= Session("ImagePathFront")%>') : rear('<%= Session("ImageThumbnailPathRear")%>', '<%= Session("ImagePathRear")%>');" 
    src='<%= Session("ImageThumbnailPathFront")%>' 
    data-zoom-image='<%= Session("ImagePathFront")%>'
    width="500" height="250"  />

Open in new window

0
 
nectarios777Author Commented:
I have done this which looks like it works. However when I click on i.e. the forth record I view the back but then the image of record one along with the zoom image of record one. The problem is the session values. Do you know how these will get updated for the current record? Many thanks for your great help so far.

  function pageLoad(sender, args) {
        var images = {
            rear: {
                thumb: '<%= Session("ImageThumbnailPathRear")%>',
            full: '<%= Session("ImagePathRear")%>',
        },
            front: {
                thumb: '<%= Session("ImageThumbnailPathFront")%>',
            full: '<%= Session("ImagePathFront")%>',
        }
        }
    $(function () {
        $("#zoom_mw").elevateZoom({ responsive: true });
        $('img').click(function () {
            var cur = $(this).attr('src');
            var indx = (cur == images['rear']['thumb']) ? 'front' : 'rear';
            $(this).attr('src', images[indx]['thumb']);
            $(this).data('zoom-image', images[indx]['full']);
            $("#zoom_mw").elevateZoom({ scrollZoom: true });
        });
    });
    }

Open in new window

0
 
Julian HansenCommented:
Just to understand

Is your solution based on these lines

full: '<%= Session("ImagePathFront")%>',

Pulling data dynamically from the session when the client interacts with the page?

If so that won't work as session information is only available when the page is rendered - not afterwards.

Also still puzzled by the $(document).ready in your zooming function - that is not how the .ready function should be used.

Will work on a multi record implementation and post back.
0
 
nectarios777Author Commented:
Yes, my solution is based on sessions as you commented. I thought I could pass the new session variables to the JavaScript method directly each time a record is pulled, but my JavaScript knowledge is beginner level. Any ideas?
0
 
nectarios777Author Commented:
What if we change the onclick method and in there we pass the sessions such as onclick="getSessions( session(a), session(b), session(aa), session(bb))" so every time we pass the new values. The loaded front thumbnail image will retrieve it's value from the src of the html. I'm not sure though how incorporate that in your method.
0
 
nectarios777Author Commented:
I have reached a point where the navigation works fine for all images are getting zoomed etc. The front zoom image appears on hover, and on click the user has to move the mouse away from the image and the zoom of the rear image appears. However, after another click (which displays the front image) the zoom image stays and does not change no matter what. I believe this is getting really close, but I haven't figured a way to re-swap the zoom images.

<script type="text/javascript">
    function pageLoad(sender, args) {
        zooming(null);
        
    }
    function front(value) {
        zooming(value);
        var frontthumb;
        frontthumb = value;
        return onImg = frontthumb;
    }
    function rear(value) {

        zoomingRear(value);
        var rearthumb;
        rearthumb = value;
        return offImg = rearthumb;
   }
   function zooming(zoomingfront) {

       // $("#zoom_mw").attr("data-zoom-image", zoomingfront);
       RemoveAttribute(zoomingfront);
       $("#zoom_mw").attr("data-zoom-image", zoomingfront);
       $("#zoom_mw").elevateZoom({ scrollZoom: true });

   }
   function zoomingRear(zoomingrear) {

       RemoveAttribute(zoomingrear);
       $("#zoom_mw").attr("data-zoom-image", zoomingrear);
       $("#zoom_mw").elevateZoom({ scrollZoom: true });
   
   }
   function RemoveAttribute(xvalue)
   {
       var input = $("#zoom_mw");
       if (input.attr("data-zoom-image") === xvalue) {
           input.removeAttr("data-zoom-image");
       }
   }
</script>

Open in new window


<img style="border:1px solid #e8e8e6;" id="zoom_mw" 
 onclick="this.src = this.src == rear('<%= Session("ImagePathRear")%>') ? front('<%= Session("ImagePathFront")%>') : rear('<%= Session("ImagePathRear")%>');" 
    src='<%= Session("ImagePathFront")%>'   
    width="500" height="250"  />

Open in new window

0
 
nectarios777Author Commented:
ok I figured it out. thanks for your help
0
 
Julian HansenCommented:
Sessions are server side - which means you have access to session information when you render the page.

Once it is rendered though you loose access to all functionality on the server. To access that information you have to either

Refresh the page
Make an AJAX call back to the server.
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 8
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now