The Order of images loaded in angular masonry changes each time - javascript

I am using angular-masonry for my website, and the order in which images are loaded changes each time.
Is anyone familiar with angular-masonry enough to tell me how to make the order consistent?

I'very not used angular-masonry, but looking at their docs (https://github.com/passy/angular-masonry/blob/master/README.md), I can see the "preserve-order" option. Are you using this, or can you provide some initialization code you're using?

Related

Dynamically loaded imagemaps in angularjs

I have proof of concept imagemap code using angularjs here.
I am writing something to behave the same as the jquery example that I put together here.
You'll note in the first example doesn't work because the imagemap is being populated by a scope variable, so on page load the image src is a 404. This prevents the imagemap from activating at all. I would really appreciate help understanding how to fix this problem.
I used the $timeout service to wait for the DOM to be rendered as described here: Slick Carousel with Angular JS
However, I needed to specify an actual timeout value as the default didn't work in my case (for both slick and mapster)

angular with isotope like sorting?

I looked for some quesitons to find my answer but ı couldn't succeed. So what I want to do is that let say I want to make a notebook like web app where users can write, attach images and draw some figures on page and I will snap that page as an image with html2canvas (I didn't try it yet but that is not the point for now.) For my porpuse let say those image will be stored somewhere and database will store the relevent data. When user view the thumbnails of pages I want to make them to be used with jquery isotope plugin or some plugin like that with the collaboration of angular js. But it can be used with already loaded js data to sort or filter. Sometimes the ordering or sorting should be done in sql query to not fetch all the rows for the sake of performance. How to manage this. If not clear or complicated entery please warn me. Thanks for reading.

Using ScrollPath jQuery plugin, any way to pause scrolling when it hits a certain element?

I am using the jQuery ScrollPath plugin, and I was wondering if their was a way to get the path to stop at each DIV for a second or so. I've seen other plugins do things like that.
I've seen it on other sites, where you keep scrolling, and it halts the scrolling for a second or so.
Here is the site I am using it on:
http://mikelegacywebdesign.com/index.html
I needed to do the same thing using jQuery Scrollpath plugin and I found a workaround way to do it, though I realise that it might not be the best way to do so.
I modified the source code of the plugin at the scrollToStep() function which is basically responsible for the actual scrolling and added a conditional check based on a flag variable in the document which when set true escapes the scrollToStep() method. Now by simply setting the flag using some external code of your choice through suitably handled setTimeout() calls, it's possible to simulate the pause at key-points in the scrollPath.
I hope this helps you.
Here is a jsfiddle with a simple delayed scroll example. I'm not sure how this would interact with the ScrollPath plugin, but it may be a good start.

How to create 2 Image rotation carousels on the same page using one jquery script file

new to jquery need help please!!... - I'm trying to create two carousels on the home page using the example below but doesn't seem to work.
I realise that the example is using ids, tried to change them to classes but didnt it do much.
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
Thanks
An important philosophy in jQuery is "Don't reinvent the wheel."
Just use a plugin for features like this, such as Easy Slider!
Here's a demo of more than one on a single page
Oh, and in the future, be sure to describe what doesn't work as well as your code if you want people to actually be able to help you with your specific problem.

Anyone know how to use the jQuery Gallery View Plugin?

I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});

Categories