I'm using the Revolution Slider plugin for Wordpress.
I have 5 images in my slider and I have 30 short texts. I want to show randomly displaying 1 of these 30 texts every time the slider change image.
Can you suggest me how can I do (also changing plugin)
Thanks
This can be easily added by a short script and a css rule.
The CSS Part
.forcenoshow { display:none !important}
The JS Part
jQuery('#yoursliderid').bind('.revolution.slide.onafterswap',function() {
var randomindex = Math.round(Math.random()*30);
jQuery('.current-sr-slide-visible').find('.tp-caption').each(function(i) {
if (i!==randomindex) jQuery(this).addClass("forcenoshow");
});
This will give all layers within the current slide a "display:none !important" attribute to hide the layer. Only 1 layer from the slide will be visible.
More FAQ and Answer at: http://themepunch.com/support-center
Related
I'd like to attach images to certain cells of my Google spreadsheet, to appear upon hovering the mouse upon that cell, similar to how the native text-only regular cell notes (Shift+F2) appear.
Natively, Google Sheets supports inserting images in the cell. My image sizes are however too big, and I'd have to make the row/column width/height huge for them to be displayed at 100%. Plus, I'd want the images to only appear upon mouseover, and not always be visible.
(I should add that the functionality I describe is actually very easily achievable in Excel, which allows setting a picture-background for cell comments, something that Google Sheets does not.)
I discovered a Google Sheets addon which seems to extend regular cell notes to include richer content, including images. Inconveniently, it requires each image be uploaded to an image server rather than be loaded from the PC. That would have still been fine, except I couldn't get it to achieve the above stated goal.
Finally, I found this suggested workaround, which for me does not work, in the sense that the image is not loaded as a preview upon mousing over the URL (whether it ends with .jpg or not), only the URL itself is:
Interestingly, the effect I'm after actually exists in Google Docs, when the link isn't even an image but just a page:
Issue:
There is no native way to trigger actions on hover events in Sheets, and there is no way to retrieve images that have been uploaded from the computer and don't have a valid URL. This greatly limits what you can accomplish.
Nevertheless, there are workarounds available that can get you close to the functionality you're asking for.
Workaround (showModelessDialog):
You could, for example create a modeless dialog whose purpose would be to show the image corresponding to the selected cell.
Ideally, onSelectionChange trigger would be used, since this trigger to refresh the modeless dialog with current image when the user changes the selected cell, but since creating a modeless dialog requires authorization, simple triggers cannot run services that require authorization, and onSelectionChange is only available as a simple trigger (cannot be installed), that won't be possible.
So one possible workflow could be the following:
Show a modeless dialog when the spreadsheet is opened by a user.
The user selects the cell with the image that should be shown.
User clicks a button in the modeless dialog (or the previous image) to refresh the modeless dialog with the currently selected image.
How to do this:
To achieve this, you can follow these steps:
Install onOpen trigger that creates modeless dialog when the user opens the spreadsheet (the trigger needs to be installed, since, as I mentioned, simple triggers cannot use services that require authorization). To do that, go to the Apps Script editor (selecting Tools > Script editor), copy this function to your Code.gs file, and install the trigger following these steps:
function onOpenTrigger(e) {
var html = HtmlService.createTemplateFromFile("Page").evaluate()
.setWidth(800) // Change dimensions according to your preferences
//.setHeight(600) // Change dimensions according to your preferences
SpreadsheetApp.getUi()
.showModelessDialog(html, "My image");
}
Create the HTML template corresponding to the modeless dialog. The idea here would be: when the page loads, the currently selected image is shown. If the button (or the image itself) gets clicked, the page will refresh with current image (see retrieveImage and refreshImage). Create an HTML file in the editor via File > New > HTML file, and copy the following code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body onload="retrieveImage()">
<img id="currentImage" onclick="retrieveImage()" alt="No image is selected" width="600">
<button onclick="retrieveImage()">Click to refresh image!</button>
</body>
<script>
function retrieveImage() {
google.script.run.withSuccessHandler(refreshImage).getSelectedImage();
}
function refreshImage(imageUrl) {
if (imageUrl) document.getElementById("currentImage").src = imageUrl;
}
</script>
</html>
Back in your script file (.gs), create a function to retrieve the image URL from current cell (in case this cell has an image). This function will get called by the modeless dialog when it loads and when its button is clicked. It could be like this (regex is used to retrieve that — see this answer:
function getSelectedImage() {
var formula = SpreadsheetApp.getActiveRange().getFormula();
var regex = /=image\("(.*)"/i;
var matches = formula.match(regex);
return matches ? matches[1] : null;
}
Note:
You can adapt the dimensions of both the selected image (<img width="" height="">) and the modeless dialog (.setWidth, .setHeight) according to your preferences.
Reference:
Dialogs and Sidebars in G Suite Documents
Installable Triggers: Managing triggers manually
getActiveRange()
Here is my scenario: On my main view I am loading a list of items. Each item has an imageURL property. I am binding an Image component to the ImageURL property. Everything works well, but the image takes an extra second or two to load during which time the Image component is collapsed. Once the image is loaded, the Image component is displayed properly. This creates an undesirable shift on the page as the image is rendered.
The same images are going to be rendered on 2 other views.
What is the best practice to handle this scenario? I tried loading the base 64 string instead of the image url, which worked, but it slowed down the loading of the initial view significantly.
How can I pre-fetch the images and reuse them as I navigate between the views? I was looking at the image-cache module which seems to be addressing the exact scenario, but the documentation is very vague and the only example I found (https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js) did not really address the same scenario. If I understood the code correctly, this is more about the virtual scrolling. In my case, I will have only 2-3 items, so the scrolling is not really a concern.
I would appreciate any advise.
Thank you.
Have you tried this?
https://github.com/VideoSpike/nativescript-web-image-cache
You will likely want to use a community plugin for this. You can also take a look at this:
https://docs.nativescript.org/cookbook/ui/image-cache
So after some research I came up with a solution that works for me. Here is what I did:
When the app start I created a global variable that contained a list of observable objects
then I made the http call to get all the objects and load them into the global variable
In the view I displayed the image as (the image is part of a Repeater item template):
<Image loaded="imageLoaded" />
in the js file I handled the imageLoaded events as:
var imageSource = require("image-source");
function imageLoaded(args) {
var img = args.object;
var bc = img.bindingContext;
if (bc.Loaded) {
img.imageSource = bc.ImageSource;
} else {
imageSource.fromUrl(bc.ImageURL).then(function (iSource) {
img.imageSource = iSource;
bc.set('ImageSource', iSource);
bc.set('Loaded', true);
});
}
}
So, after the initial load I am saving the imageSource as part of the global variable and on every other page I am getting it from there with the fallback of loading it from the URL is the image source is not available for this item.
I know this may raise some concerns about the amount of memory I am using to store the images, but since in my case, I am talking about no more than 2-3 images, I thought that this approach would not cause any memory issues.
I would love to hear any feedback on how to make this approach more efficient or if there is a better approach altogether.
You could use the nativescript-fresco plugin-in. It is an {N} plugin that is wrapping the popular Fresco library for managing images on Android. The plugin exposes functionality like: setting fade-in length, placehdler images, error images (when download is unsuccessful), corner rounding, dinamic sizing via aspect ration etc. for the full list of the advanced attributes you can refer this section of the readme. Also the plugin exposes some useful events that you can use to add custom logic when images are being retrieved from remote source.
In order to use the plugin simply initialize it in the onLaunch event of the application and call the .initialize() function:
var application = require("application");
var fresco = require("nativescript-fresco");
if (application.android) {
application.onLaunch = function (intent) {
fresco.initialize();
};
}
after that simply place the FrescoDrawee somewhere in your page and set its imageUri:
<Page
xmlns="http://www.nativescript.org/tns.xsd"
xmlns:nativescript-fresco="nativescript-fresco">
<nativescript-fresco:FrescoDrawee width="250" height="250"
imageUri="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
</Page>
So I have a page using GalleryView 1.1 here. I like the behaviors just fine except that the left-most item's onclick event won't fire for some reason.
I also grabbed the 2.1 version from the GoogleCode page; the author's page at http://spaceforaname.com/ has gone. So here is a page implementing 2.1.
Since 2.1 has a bunch of behaviors I hate and seems to completely prevent my onclick events I would like to sort out the issue with the left-most item's onclick in the v1 page.
I have read through the code but failed to find what is interfering.
The function looks like this:
$('.myslides').click(function() {
//alert($(this).attr('alt'));
$('#big_pic').attr("src", $(this).attr('alt'));
return false;
});
and the items like this
<li><img src='g/weddings/slides/1.jpg' width='165' height='110' alt='/g/weddings/slides/1_big.jpg' class='myslides'/></li>
I have tried moving the class attribute to the LI, and also adding an anchor around the image and giving it the class but neither of these had a visible effect.
// Edit
The page validates and yes I know the big pics are blurry. Don't have them from GD so did best I could stretching thumbs.
Does anyone have an idea of how I should pursue debugging this?
So when inspecting the elements in question I found that the working thumbnails were all image elements but the non working first thumbnail was a div with id "pointer".
Since the author's site with the docs has evaporated I can say what function #pointer has in my filmstrip slides but in jquery.galleryview-1.1.js on line 319 I changed its width to 1px in the JS CSS and this resolved the issue of the obstructed onclick. #pointer may have a function I am not employing here. At any rate the issue is resolved.
Width was previously set to
'width':opts.frame_width-pointer_width+'px',
Now set to
pointer.attr('id','pointer').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1000',
'cursor':'pointer',
'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'1px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
Also tried adding display:none but this resulted in jerky animation.
I'm trying to using the jQuery cycle plugin (http://www.malsup.com/jquery/cycle/) to create a banner like the one on this page: http://www.epa.gov/. Specifically, I'd like the navigator buttons to lay on top of the images. The way it is done on epa.gov is the nav div is absolutely positioned on the page, so you have to absolutely position that div on every page you want to use it on. The easier solution would be to relatively position the nav div in the div that holds the images I want to scroll. The problem is I don't see how you can do that.
The code for cycling images is:
$('#banner').after('<div id="nav"></div>').cycle({ fx: 'fade', speed: 1000, timeout: 5000, pager: '#nav', autostop: true, autostopCount: 5 });
the "after" function creates the nav div and the pager option makes that div the navigation for the banner div, which holds the images, but the nav div is created either before or after the banner div. I want the nav div to be created inside the banner div so that I can relatively position it in that div, since it is the one that actually holds the images. Is this possible? Is there a different plugin I should be using for this?
There's actually a very similar example right on Malsup's example page here:
http://jquery.malsup.com/cycle/pager-over.html
Go to 'even more demos', and it's the top one (pager on top of slideshow).
It was hard to find, and the only reason that I know it was there was because I've spent hours there!
I have created the layout for my new portfolio webpage here: http://vitaminjdesign.com/work.html
I want to have a legend with tags (ALL, logo design, marketing, web design, print design) and when these tags are clicked, the page filters the results and display them like they are currently displayed. At first, I want ALL projects displayed, but when the user clicks on a tag (say "print design"), the list is filtered and displayed.
If I have this as my legend: logo
and when logo is clicked, I want all of the div's with the class "logos" to stay and all of the the divs with the other classes to fade out.
What is the easiest way in jquery to make this work. Please note: I am not very experienced with jquery, so please be as thorough and idiot-proof as possible.
First add the classes (logodesign, marketing, webdesign, printdesign) that apply to each project to the div your are assigning the numeric class to.
Then create links that are to filter for each tag like:
Logo Design
Then assign a click event that will hide the others and show the selected one.
var $projects = $('#projects');
$('a.logodesign').click(function() {
hideAll();
showTag('logodesign');
});
function showTag(tag){
$projects.find('div.'+tag).stop(true).fadeIn();
}
function hideAll(){
$projects.find('div.logodesign, div.marketing, div.webdeisgn, div.preintdesign').fadeOut();
}
Although it isnt a direct answer to my question, I found a tutorial on how to achieve EXACTLY what I wanted. It is here:
http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip