I want to add multizoom.js in my AngularJS project.
This is my index page:
<body>
<img id="zoom" ng-src="example.jpg" class="example ng-class">
<div ng-view> </div>
</body>
and this is detail page:
<img id="zoom" ng-src="example.jpg" class="example ng-class">
My problem is jQuery multizoom plugin doesn't zoom image which is in AngularJS's ng-view part.
If image is not in ng-view part multizoom works fine.
This is because I presume you are initialising the multizoom behaviour on the DOM ready event, using $(function() { /* ...(multizoom init code)... */ }); or $(document).ready(function() { /* ...(multizoom init code)... */. If so, that will only be run once, and likely before the details page is loaded into the <div ng-view></div>. As a consequence, it will not be able to find the image on that page it is searching for as it hasn't been loaded in yet.
Instead, what you need to do is initialise your multizoom functionality whenever the ng-view content is loaded, using the event that is emitted, like so:
// (inside some function with $rootScope available)
$rootScope.$on('$viewContentLoaded', function() {
// ... (multiview init code here) ...
});
Does that make sense?
As a small side note, don't have multiple elements with the same ID, it's not a good idea. Instead, use a class to signify the images you want to apply the multizoom plugin to.
Related
everybody.
I am using the following:
angular: 1.6.1,
angular-material: 1.1.3,
angular-ui-router: 1.0.0-rc.1
All my views are built using components and I am routing them with the UI-Router 1.x component syntax:
$stateProvider
.state('main', {
url: '/main',
component: 'main',
})
For the sake of completeness, my components are laid out as follows:
angular
.module('app.main')
.component('main', {
templateUrl: '/modules/main/main.html',
controller: MainCtrl,
})
MainCtrl.$inject = [];
function MainCtrl (){
}
My index.html is as follows:
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout="column" flex ui-view></div>
My view for the main component is irrelevant at this point as the problem starts here. If, for example, my view for main.html is as follows:
<div layout="row" flex>
Content
</div>
The div will NOT flex. If, however, it is simply added in place of the ui-view in the parent, it will flex as normal.
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout-align="column" flex>
Content (THIS WORKS FINE!)
</div>
Both contain the same attributes in the inspector apart from the usual differences in using ui-view.
This also seems to be causing problems with md-content, which will only scroll if it is the element in the parent that contains the ui-view. Any nested md-contents will not scroll.
I have also tried using the original ui-router way of routing to controllers and templates which was the norm before the .component syntax.
There is a similar problem listed here:
Angular Material layout breaks when using UI-Router
It seems that this gentleman's solution was to abandon UI-Router and use ng-route. I really don't want to move away from UI-Router and am considering completely abandoning Angular-Material but would really prefer to avoid that.
Can anybody please help out with this?
I have a select.php page where the user selects a value from the dropdown. On selection the ajax code runs and information from ajax.php gets populated on the "display" div of the select.php page. Some of the information coming from ajax.php is in the form of textarea. But it gets displayed just as textarea, and not as tinymce editor. Even though I have called it in the head section of my page.
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea'
});
</script>
My problem is very similar to this: How do I initialize TinyMCE on a ajax loaded textarea in 4.x?
But I am not understanding the solution. Please help.
you can get data after that set data on tiny
success: function (data) {tinyMCE.get(data).getContent().replace('\'', "\’");},
Your call to tinymce.init() only acts on items in the DOM at the time the init() function is run. If you are adding additional <textarea> fields to the page later you need to run tinymce.init() after you add those elements to the DOM.
You can include a call to tinymce.init() in the same block of code that injects the <textarea> into the page directly after you inject the <textarea>.
I'm using openseadragon to display deep zoom images, and my client wants there to be a button to download the image and a button to print the image, in addition to the regular nav items. There are no premade buttons for these functions in openseadragon, so I need to create the buttons manually. I have no idea how to do this, can anyone help me?
I need to:
(1) Add new buttons to the viewer nav
(2) Create functions to download and print the current image.
(1) We have similar functionality in our openseadragon (OSD) site. I made a custom toolbar including the default buttons and added our own buttons. The binding of custom actions are setup by simple giving OSD the id of the elements on init. The binding of the custom buttons was made 'manually'. The html code could look something like this:
<div id='viewerToolbar'>
<!-- Default buttons -->
<div class='toolbarItem' id='pv_home'></div>
<div class='toolbarItem' id='pv_zoom-in'></div>
<div class='toolbarItem' id='pv_zoom-out'></div>
<div class='toolbarItem' id='pv_full-page'></div>
<!-- custom actions -->
<div class='toolbarItem' id='customAction'>customAction</div>
<div class='toolbarItem' id='customAction2'>customAction2</div>
</div>
OSD setup something like this:
OpenSeadragon({
id: 'viewer',
tileSources: 'DZI_URL'
toolbar:'viewerToolbar',
zoomInButton: 'pv_zoom-in',
zoomOutButton: 'pv_zoom-out',
homeButton: 'pv_home',
fullPageButton: 'pv_full-page'
});
Custom button setup something like this (jQuery):
$( '#customAction' ).on( 'click', function() {
//Do custom action
});
$( '#customAction2' ).on( 'click', function() {
//Do custom action 2
});
(2) We created our own services to generate a PDF for download which the user also can print which. I think this is easier and gives a more reliable result than trying to print/download from OSD. You will probably run into issues like: printing is done from current zoom level; resolution issues; you will have to wait until tiles a fully loaded before creating png for downlaod etc.
Is it possible to know where an image has been dropped?
Assume we have a checkerboard with different divs
<div id="jquery-wrapped-fine-uploader"></div>
<div id="checkerboard">
<div id="A1" class="ffup"></div>
<div id="A2" class="ffup"></div>
<div id="A3" class="ffup"></div>
<div id="A4" class="ffup"></div>
......
</div>
<script>
$(document).ready(function () {
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: 'endpoint.php'
},
dragAndDrop: {
extraDropzones: [$('.ffup')]
}
});
});
</script>
First of all, your code will only designate the first ffup div (A1) as it currently stands. You will need to pass a selector for each individual drop zone into your extraDropzones array. The jQuery wrapper will only pass the first element covered by your jQuery selector to the library. Ideally, it would pass along all items represented by the selector, but, to do this, it would have to be aware of the intended type of the parameter. The jQuery wrapper must convert all jQuery objects to HTMLElements before passing the data on to Fine Uploader's core code (which is not aware of jQuery). This is something I'd like to look into more in the future, but this is the way it has worked since 3.0. Note that this limitation does NOT apply to the target of a Fine Uploader plug-in instance, i.e. $(".myTarget").fineUploader(...).
As to your question, Fine Uploader does not currently pass any information along to callbacks that would allow you to determine which drop zone received an associated file. This is an interesting feature, and I can see how it may be useful. Please open up a feature request in the issue tracker so we can discuss and prioritize this for a future release.
I haven't explained this well.
But what i mean is, if I have an ajax script that loads the content of a page in a DIV element, through the function 'loadpage('whatever.php');, instead of going around manually doing this to all links, is there a way of having a script that automatically makes all regular links load through that ajax function?
Like on Facebook, your profile loads through ajax, yet if you look at their code, they just have a regular link to the profile.
Cheers!
Sure, you can do it with jQuery.
This script goes through the document, finds every anchor element and binds an event handler to the click event of each. When the anchor element is clicked, the event handler finds the href attribute and loads that page into #targetDiv (you can call this div whatever you want, of course).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#targetDiv").load(($(this).attr("href") + " body");
return false;
});
});
</script>
...
<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>
You can use JQuery for this (if I understand your question right).
First you can make the function loadpage() as follows:
function loadpage(divId, url) {
$('#' + divId).load(url);
return false;
}
.load() isn't supported by all browsers though. If you want to do this without .load() then you can check out .get(). For more info on .load(), take a look at http://docs.jquery.com/Ajax/load
I'm assuming it would go something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").load($(this).attr("href") + " body");
return false;
});
});
This would make all <a> tags on the page call a function that downloads a HTML document from the href attribute of the tag, strip out it's body tag, and replace the contents of the current page's body tag with the contents of the new body tag. This way, it's easier to work this with no JavaScript, as well as integrate it into an existing site.
To use it, you place this into a <script> tag in the head of your main page, or in an external JS file.
Please note, however, that this code only updates the contents of the <body> tag, the head (including the title tag) remains untouched. You may need to add extra code to update things like this.
Simple and Nice. Check this out:
Bjax
Usage:
<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />
Finally, include this in the HEAD of your html:
$('a').bjax();
For more settings, checkout demo here:
Bjax Demo