tried to implement javasciprts with to resolve the problem but in case of errors datatables disappears its css ie seach box pagination etc...I m here fetching the data from my database and displaying it all on my page on which the magnifeir for those fetched image works...
As i m working with laravel
Controller -
public function nameimages(Request $request){
$post= $request->all();
if(Auth::check()) {
$user = Auth::user();
$fname = $user->fname;
$lname = $user->lname;
$id=$user->id;
}
$result= DB::table('users')->where('fname',$post['fname'])->first();
$pid=$result->id;
$row=DB::table('patientupload')->join('users','users.id','=','patientupload.Pid')->where('users.fname',$post['fname'])->select('patientupload.upload1','patientupload.description','users.fname','users.lname','patientupload.appid')->get();
return View::make('doctorviewimg')->with('data',$row);
}
Route -
Route::post('doctorviewimg','DoctorController@nameimages');
Here my Blade file -
@extends('layouts.doctor_outheader')
@section('content')
@include('common.errors')
<head>
<title>View</title>
$(document).ready(function(){
$('#example').dataTable();
});
<style>
.glass {
width: 175px;
height: 175px;
position: absolute;
border-radius: 50%;
cursor: crosshair;
/* Multiple box shadows to achieve the glass effect */
box-shadow:
0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/* hide the glass by default */
display: none;
}
/************ Styles just for DEMO purpose*********/
wrap {
max-width: 700px;
margin: 20px auto;
}
.product {
margin: 20px auto;
/text-align: center;
padding: 20px;/
}
</style>
$(function() {
var native_width = 0;
var native_height = 0;
var mouse = {x: 0, y: 0};
var magnify;
var cur_img;
var ui = {
magniflier: $('.magniflier')
};
// Add the magnifying glass
if (ui.magniflier.length) {
var div = document.createElement('div');
div.setAttribute('class', 'glass');
ui.glass = $(div);
$('body').append(div);
}
// All the magnifying will happen on "mousemove"
var mouseMove = function(e) {
var $el = $(this);
// Container offset relative to document
var magnify_offset = cur_img.offset();
// Mouse position relative to container
// pageX/pageY - container's offsetLeft/offetTop
mouse.x = e.pageX - magnify_offset.left;
mouse.y = e.pageY - magnify_offset.top;
// The Magnifying glass should only show up when the mouse is inside
// It is important to note that attaching mouseout and then hiding
// the glass wont work cuz mouse will never be out due to the glass
// being inside the parent and having a higher z-index (positioned above)
if (
mouse.x < cur_img.width() &&
mouse.y < cur_img.height() &&
mouse.x > 0 &&
mouse.y > 0
) {
magnify(e);
}
else {
ui.glass.fadeOut(100);
}
return;
};
var magnify = function(e) {
// The background position of div.glass will be
// changed according to the position
// of the mouse over the img.magniflier
//
// So we will get the ratio of the pixel
// under the mouse with respect
// to the image and use that to position the
// large image inside the magnifying glass
var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
var bg_pos = rx + "px " + ry + "px";
// Calculate pos for magnifying glass
//
// Easy Logic: Deduct half of width/height
// from mouse pos.
// var glass_left = mouse.x - ui.glass.width() / 2;
// var glass_top = mouse.y - ui.glass.height() / 2;
var glass_left = e.pageX - ui.glass.width() / 2;
var glass_top = e.pageY - ui.glass.height() / 2;
//console.log(glass_left, glass_top, bg_pos)
// Now, if you hover on the image, you should
// see the magnifying glass in action
ui.glass.css({
left: glass_left,
top: glass_top,
backgroundPosition: bg_pos
});
return;
};
$('.magniflier').on('mousemove', function() {
ui.glass.fadeIn(100);
cur_img = $(this);
var large_img_loaded = cur_img.data('large-img-loaded');
var src = cur_img.data('large') || cur_img.attr('src');
// Set large-img-loaded to true
// cur_img.data('large-img-loaded', true)
if (src) {
ui.glass.css({
'background-image': 'url(' + src + ')',
'background-repeat': 'no-repeat'
});
}
// When the user hovers on the image, the script will first calculate
// the native dimensions if they don't exist. Only after the native dimensions
// are available, the script will show the zoomed version.
//if(!native_width && !native_height) {
if (!cur_img.data('native_width')) {
// This will create a new image object with the same image as that in .small
// We cannot directly get the dimensions from .small because of the
// width specified to 200px in the html. To get the actual dimensions we have
// created this image object.
var image_object = new Image();
image_object.onload = function() {
// This code is wrapped in the .load function which is important.
// width and height of the object would return 0 if accessed before
// the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
cur_img.data('native_width', native_width);
cur_img.data('native_height', native_height);
//console.log(native_width, native_height);
mouseMove.apply(this, arguments);
ui.glass.on('mousemove', mouseMove);
};
image_object.src = src;
return;
} else {
native_width = cur_img.data('native_width');
native_height = cur_img.data('native_height');
}
//}
//console.log(native_width, native_height);
mouseMove.apply(this, arguments);
ui.glass.on('mousemove', mouseMove);
});
ui.glass.on('mouseout', function() {
ui.glass.off('mousemove', mouseMove);
});
});
</head>
Details Of Uploaded Report
Back
<?php echo Session::get('message'); ?>
{{$errors->first('status')}}
Images
Image Description
<?php
foreach($data as $row)
{
<?php
>
@if (pathinfo($row->upload1, PATHINFO_EXTENSION) == 'pdf')
upload1) }} >Report
@else
 upload1)}}" style="max-width:250px; max-height:250px;" class="magniflier img-responsive" alt="">
@endif |
<?php echo $row->description ?> |
?>
<?php } } else {?>
Sorry! It Seems Patient Have Not Uploaded any Images or Reports.
<?php } ?>
@endsection
salil93
Posts: 12Questions: 2Answers: 0
Answers
I can't really read the above, but it sounds a lot like this FAQ.
Allan
sorry for that i have a lot of script and css for that page which makes it that way...my problem is that i have used image-hover-zoom for a series of images which are stored in my database and fetched them in datatables as rows on the first page image-hover-zoom works fine i can zoom every pic but when i go to second page it stops working...datatables are working fine but image-hover-zoom stops working for second page
Yup - it sounds exactly like the FAQ I linked to. Did you read that and use the information from it? If so, what did you try?
Allan