I want to enter custom HTML as the title, like this:
$(".fancybox").fancybox({
padding: 0,
title: 'Hello'
});
...but I also want a gallery of images.
I don't think you can have both as each gallery should use the same code above, but each unique title needs a separate implementation of the above code. Is this possible?
Also, is there a better way to set say 20 images, all in the same gallery and all with custom title content. At the moment I'm guessing I would need to specify each one individually using this code:
$("#fancybox-number-1").fancybox({
padding: 0,
title: 'custom-title-1'
});
(...but of course the gallery won't work and even if it did, specifying this 20 times sounds bad practice to me.)
How do I specify custom title, and have a gallery of 20 or so images in the best way possible?
Related
I need to click like icon but after checking the condition, if this is already liked or not. So i need two different locator paths to differentiate between the two. The only thing different is the classes but the class name has spcae in between and the protractor cannot locate the space class name, even after adding dots for space.
My protractor code and html structure is in the picture:
It's not clear what you're trying to achieve. If you update your post showing html of liked icon and not liked icon and what your script is doing i can give you a solution.
If your element is <i class="fa fa-heart liked">.
There are three ways to locate such elements using CSS.
$heart = $('i[class="fa fa-heart liked"]');
$heart = $('.fa.fa-heart.liked"]');
$heart = $('i[class*="fa-heart"][class*="liked"]'); // contains partially
Also you have an option using xpath
Started to try out this fancybox3 plugin to zoom thumbnail images in our app that works perfectly on desktop and mobile browsers.
In the app where the cart has thumbnail images of the products added to it that can be purchased. If I remove a product(image of it)from the cart, it gets removed from the cart, however, if I zoom one of the remaining product images of the cart and navigate through it, still showing the removed product there. I am expecting to see only the product images present in cart.
I tried using the preload: 0 option but that does not work for me. Fancybox is initiated in following way
$('[data-fancybox="images"]').fancybox({
idleTime : false,
loop: true,
transitionEffect : "fade",
animationDuration: 333,
buttons: [
'close'
],
protect: true,
infobar: false,
preload: 0
});
Any help to make this work is really appreciated.
Thank you
Looks like you have misunderstood the concept of "preloading". The script preloads images before displaying, but what that means is that it is showing loading icon before displaying full image. If you disable preloading and provide dimensions (width/height) of full image, then the script will display thumbnail image while full image is loading. This is a great feature if you want to make your app/webpage look more interactive (e.g., user would not stare at black overlay with loading icon but will see something useful instead).
But what you have described sounds like "caching" and fancyBox is not caching dom elements. So, if you see something in the gallery, that means that corresponding element exists in your page.
So, make sure that your product is actually removed from the dom or try to tweak the selector to match only "actual" products using "selector" option, e.g., something like:
$().fancybox({
selector : '.fancybox:not(.removed)'
});
Obviously, you should tweak this to suit your needs. Since you have not provided any details, I can not create a full example.
#Janis, Thank you so much for the clarification on 'preloading' concept.
You were right about dom still holding the removed item. Upon removal, the div is simple being set as display none.
First, I added code to remove the div form the dom but that resulted in page getting refresh which we don't want.
Next tried, the selector option and it worked perfectly.
function hideCartItem(id) {
var divItem = document.getElementById("divCartItem" + id);
var elem = "#divCartItem" + id
if (divItem != null) {
$(elem).hide();
$(elem).remove();
// added code
$('[data-fancybox="images"]').fancybox({
divItem: '.fancybox:not(.removed)'
});
}
}
Thank you so mcuh for your help. Much appreciated!!
I'd like to modify the list of courses ( course overview ), to modify the display of the courses.
I'd like something like that:
Is there a way to save a thumbnail for each course in the database, and display it in the dashboard of the course list, each course with it's own picture, according to the subject
I have updated the file moodleDir\blocks\course_overview\renderer.php
I added a static HTML image next to each course
In the course settings form there is an option to add images in "Course Summary files"
You can upload an image there and retrieve it in the renderer using the function course_image($courseid) shown in this example:
https://gist.github.com/bmbrands/c1eb21dfa7f491b1205ea0ca806b5493
I am using fancybox to load all images in my application. As of now, i am creating my own methods for Next & Previous links and not using fancybox ones. The output is like this.
http://imgur.com/a/TFq2N#0 (Desired output)
But the only problem is, upon clicking, i am changing the images, which is taking some time.
Now, i want to use fancybox gallery, because i have all URLs and titles with me in an json array. So i did something like this and now i am getting this as output. (http://i.imgur.com/JNfmz.png)
All i want is, The (desired output) with images much easier to load.
$.fancybox([{href : 'image.jpg', title : 'Lorem lipsum'},{href : 'image.jpg', title : 'Lorem lipsum'}]);
Can i make it look like my desired output, means can i add custom content?
i'm developing an app that will be just a wrapper for a certain book
the book is in HTML so, i want to make something like stanza,
i want to determine no. of pages given the Whole book HTML and to paginate that dynamically into views.
is there any built-in methods that can help me with that?
or
does anyone know any idea of how that can be done ?
If you only need to do this once: insert some javascript into the HTML to tell you the height of the document once it's done loading, e.g.:
alert(document.height);
and divide that by the height of your web view to get the number of pages.
You can use UIWebView to load the data, and leave the navigation/link code to paginate in the HTML.