i am facing a issue.
I have created a images gallery in which the 18 images are showing by default and if user scroll down to the end of page then more images are adding to the gallery through ajax.
Now suppose when user have 18 images and he opens a lightbox then the opend lightbox has 18 images that he can navigate back and forth.
Now if user scroll the page to end the new images are added to the page and i want to add those images to theopened lightbox.
Please suggest a way to acheive this.
Thanks in advance.
Background
When the user clicks an image, the Lightbox script's start() method is called. This will compile the list of images to show, either a single one, or a set if data-lightbox is specified, by going through the page. These are stored in a an array called album on the lightbox object.
If you dynamically load images, then the user click an image to open Lightbox, things should work as expected, as the compilation of images happens on open.
Solution
In your scenario, the Lightbox is already open, and I'm assuming you have a set of images being browsed. You want to let the user continue scrolling while the Lightbox is open and this scrolling will dynamically load more images onto the page that are part of this set.
There is no documented way of doing this. But, you can fix your issue by digging into the internals pretty easily. This is normally not recommended, but no major changes to the Lightbox2 API are expected, so this should be safe (no guarantees though).
On scroll, once new images are loaded, add them to the Lightbox object's album property manually. Then call updateDetails() to refresh the UI.
lightbox.album.push({
link: 'fruit-roll-ups.jpg'
});
lightbox.updateDetails();
Related
I have an AngualarJS app that has an index page and some partial pages, displayed in ui-view. The app is using ui-routing. I have a button on the header (located on the index page) and on click of that button I want a small pop up open - a page displaying some data from the database, based on currently logged in user. I am trying to decide between opening a windows with window.open and sizing it to about 400x400 but that seems very un-elegant plus I see some issues with opening it. Another option I am entertaining is bootstrap ui modal but that would involve including bootstrap in my project on top of all the angular and routing includes.
Not sure if there is a better way to go, would appreciate any leads.
If you don't want to include bootstrap in your project You may use this one
--> http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/
I had created content type then view and display it as a block. Then enable the block. Banner images are showing but javascript of my banner is not applying? as i uncluded it in .info file also?
Are you trying to make an image carousel or slider?
You may want to checkout Views Slideshow.
If you added the js file to the info file of your theme, you might need to flush the cache for it show up.
After that, you'd need to have specific js to target the images within the view.
I have a view for which route has been defined. On the view I have a no of images and when I click any of them the Modal Dialog appears with the detail of that image. What I want to do is to change the url only when the modal appears so user can easily share them. And yes, the share url would be another route I will define so when user directly come to that one, the modal pops in. Any suggestion please?
I would not change the URL when a modal appears. A modal is an overlay of your page and actually not a new page with a new URL.
Many image hosters, however, show the URL in a read-only field under the picture so that users can copy it. Maybe this is the way you would like to go.
On the page itself I recommend using $location to determine if there is an imageId in your URL. If so, just invoke the same logic as if a user clicked on that image on the page.
I have a gridpanel with some buttons for each row in the panel. When clicking the buttons, a new Ext.window pops up loading a remote url . Since the remote URL is opened in an iframe, I cannot use Ext.getBody().mask in the parent grid and Ext.getBody().unmask in the iframe, because these are two different pages. The reason I want to do it like this (Ext.getBody().mask in the parent page, and the unmask in the iframe) is because the url loaded in the iframe has a lot of js and images being loaded in the section. Therefore if i use the mask and unmask in the iframe, it will still take a lot of time to load whats in the iframe header, until it gets to the point where I can use the Ext.getBody().mask
My question is: can Ext.getBody().unmask() be used somehow on the parent window? (to hide the mask opened from the parent)?
Thanks,
Dan
try running window.parent.Ext.getBody().unmask() from the iframe.
I assume your iframe has the same origin as the parent.
I have a normal article page with a huge image shown as a small one. What i want to do is, when the user click on the image, a new page is rendered and the image is shown at full size of the page (no menus, header, footer, etc.. just page). If the user click again, he will be redirected to the previous page.
How can i do this with joomla? I mean, i could create an html page, but i don't know how can i access it.
Any help would be appreciated,
RR
All you need to do is add this to any link you want to display without all of the module positions -
?tmpl=component
This tells Joomla to load just the component part of the page without anything else around it.
Not sure that anything specifically in Joomla is going to allow you to do that. The only way you can achieve that directly in Joomla would be using a light box type of plugin. When the user clicks the image, it will open up a full size window of the image. When the user click on the image again, it will exit the light box.
Otherwise, you can just edit the source code of the page, and change it to <img src="http://www.pathroyourimage.com/image.png"> . That way when a user clicks the image, they go directly to the picture.