I want a image gallery similar to the design as show in fiddle example. It has been customized to look more what we are looking for but i have two issue with this right now
Popup is not aligned in the middle of the page. i tried changing few properties but that didnt work
How can i add working Next Prev button functionality to this gallery so that users dont have to click each time to view the next phone. I had looked at other galleries but each had one of the other problem when i tried to customize them.
I had tried to customize this gallery but i had same it i need to show image in a fixed box 600x300 pixel with image on left & text on right of the image.
I also tried to modify Magnific popup almost change the script to work but this also had an issue as it always start the galley from first image itself irrespective of which image users click on http://codepen.io/anon/pen/LvFxH
Related
I've got a little application that shows one photo in the middle of the page, some right/left buttons for changing the photo, and a flexslider at the bottom of the page having thumbnails of all available photos. Depending on the width of the browser, 4 to 10 thumbnails are visible at a time.
I want to synchronize the slider with the main photo. I've turned animation off. And when I click on something in the slider, the main photo updates. I've got this working.
But when I change which photo is shown using the right/left arrows, I want to update the slider so that the thumbnail for the main photo is shown, as in, move the slider right or left. I tried just manually changing (increment or decrement) the slider.animatingTo value, but that doesn't update the slider on the screen.
I've also tried, by modifying the jquery.flexslider.js file, putting one of the update methods onto the slider object (essentially making it public). But I'm not sure what the right function to call would be.
Any help would really be appreciated.
I found the solution:
slider.flexAnimate(slider.getTarget("prev"));
and
slider.flexAnimate(slider.getTarget("next"));
I got this source code from "https://www.w3schools.com/howto/howto_js_slideshow.asp" and when it first shows after each time I click refresh on the page, only the dots and arrows appear, so I was wondering how I can make it so it appears on an image first hand.
When you first add the code to a text editor and link all the HTML, CSS, JS, and open it in the browser, all you get is the arrows and the dots. After you click on either of those the image appears and it works nicely. But after each refresh the same problems appears Just want it to make it so the image appears automatically.
Thanks everyone for your help!
http://dynamo.viralsmods.com/becky
The circular images of people on the front page have a tooltip associated with them. When you hover over each tooltip for the first time, it shows, but any subsequent hover does not. What is the reason for this?
Secondly, if you view the website on a smaller screen (either mobile or just shrink your screen), the navbar shows the three lines instead of the links. When you click/ tap the three lines, it brings up a dropdown menu with the new links. When you tap it again to hide it, it hides and then automatically shows again. This error seems to be the same sort of problem with the tooltips, as it can't show/hide properly.
Any insight?
http://dynamo.viralsmods.com/becky/web/js/jQ.min.js (included in your page) is jQuery v1.7.1.
Bootstrap requires jQuery >=1.9.0
Upgrade your jQuery!
I have a textbox, a div, and an image.
Do we have any way to do like this:
When I drag that image into the div. (The image don't need to move, just like we left click on it, and drag it to anywhere, but it never move.)
The div show the image. (Duplicated 1 image into the div)
The text show URL of that image.
Do you have any idea or article(s) on doing this thing?
I've never coded drag drop in my life, but I know Step 2 is just set HTML for the div, and Step 3 is just get image src. However, on Step 1, how do I know when "the image into the div and the mouse release?"
I know jQuery UI, it's not the dragable from jQuery UI, cause the draggable makes object move. I don't want it move. Can you try click on any image on this stackoverflow website, or any link. Then you hold your mouse and drag it. Try drag a link into the search box at top, and you get the link. Thats what I want. Not the dragable of jQuery UI to make the object move.
You can do all of this with the dragable feature in jQuery. I noticed in a comment you mentioned that you don't believe this will work because it actually moves the image but there are more than just the default options! Take a look at the clone helper attribute.
Here's about as close of an example as there is and it sounds like you already know how to handle the rest (getting the src attribute, etc.).
http://jqueryui.com/demos/droppable/#method-option
JQuery draggable allows you to leave the original in its place while dragging through the use of Helpers. See this url and try dragging the top grey boxes around. The two on the right use helpers, leaving the original in place.
http://www.jqueryui.com/demos/draggable/#visual-feedback
Using this in conjuntion with the link Artsemis provided will do the trick
Dragging an image into your address bar is a function of the web browser, not JS or the page you are viewing. You will want to use jquery draggable or something like it.
I've got a image gallery where by the user clicks on a thumbnail, it then retrieves the image and displays it in a container. Now I've added 2 buttons to navigate between images, however I'm not sure how to make the rotation work.
Can someone have a look?
http://jsfiddle.net/calebo/QuXYV/
take a look at my blog, I guess this is exactly what u want.
http://mycodelove.wordpress.com/2011/09/18/simple-photo-gallery-from-img-in-li/