Solved

Changing attribute value and refreshing loaded image

Posted on 2014-04-26
12
3,274 Views
Last Modified: 2014-04-28
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
Comment
Question by:nectarios777
  • 8
  • 4
12 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
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
 
LVL 1

Author Comment

by:nectarios777
Comment Utility
ok I figured it out. thanks for your help
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now