I'm building a website with a portfolio, and would like to be able to click on a single image for each project, which would then dim the page, and open a slideshow with multiple images of the project, as well as a description. Basically this would be a lightbox, but instead of just opening the single image, each different lightbox would contain a slideshow on the left, and static text on the right. Is this possible? I thought maybe it would be done by implementing something with http://noelboss.github.io/featherlight/
Thanks so much for your help, you guys are amazing!
Instead of opening up a single image using the default implementation:
<span data-featherlight="myimage.png">Open image in lightbox</a>
You could try instead to use FeatherLight's iFrame feature and call an external Div:
Open element in lightbox
<div id="mylightbox"><img src="myimage.jpg" /><p>This div will be opened in a lightbox</p></div>
You could then style this to have the image float left, the text float right etc.
Unsure as to whether this will work with FeatherLight's gallery extension though!
Related
I found this awesome effect on codepen and I want to implement this effect on my own website on the background.
But the problem I have to face here is that the background image get set by wordpress and a plugin called visual composer. At the background image gets set as css backgorund image and not as an <img> div. But the code you see above on codepen.io is dealing with an <img> div.
So, I want to transfer and customize this code for my website to get it working there. The <div> in which you can find the background image on my website where I want to appear this effect is called ``. You can get the <div> of it by typing this in your console:
document.getElementsByClassName("vc_custom_1493329568717")
I already tried to recreate this effect on a local level. But I only could do it with an <img> div. So, here is my question. Does anybody has an idea, how I can transfer this effect to my website?
I would be very happy about an idea or an answer.
Kind regards and Thank You!
I have found ways of changing the zoom image using links with rel="smallImage:image1.jpg" etc, but I am creating an image at runtime and adding it to the page, so the link will not be there when the page first loads (which it seems like it needs to be).
When I generate the image at runtime, I add a thumbnail to the page and a link to open the thumbnail as the large image. I then want to be able to hover over this image to get the cloud-zoom functionality, but even if I use the code I mentioned above to set the image, I still see the original image as the zoom image.
I was wondering if there was a way I can use JQuery to change the zoom image at the same time I change the source of the image? I was hoping for something as simple as $("image1").CloudZoom.zoomImage = "image2.jpg" but nothing like that seems to work.
Thanks guys
You can place the thumbnail in a div and give the div an onclick event.
<div onclick="DisplayThumbnail(ImagePath)"><img src="ImagePath" /></div>
Call a javascript function and add this:
$('#CloudZoom').attr("href", newimagepath);
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
The cloudzoom uses the anchor tag's href to point to the image to use, so that is the reason we update the href to the new image tag.
I'm looking for a script that will allow a user to pick an image in an HTML page and drag it to a new location while allowing the other page's element to align around it.
While dragging the image should be completely visible (there are many scripts, like TinyMCE and CKeditor) which don't show the image while dragging and only show its new location and the elements around the dragged image after dropping it.
And just to be clear, the image is using the same z-index as the rest of the page (its inline).
I hope I was clear enough, let me know otherwise.
Something like jQuery Masonry? http://masonry.desandro.com/
I have a page I am working on that has several links, but has a persistent area where a background fades into a new image when any of those links are hovered over. sort of like this script: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
except the only option with that script is to have those links target that large image, I need those links to go to separate places entirely.
What can I do about this? Thanks for the help.
You would just place this code within each of the small images and change the 'where_you_want_it_to_go' part, depending on the destination.
onmouseover=document.getElementById('where_you_want_it_to_go').innerHTML= '<img src="image.jpg/>';"
Is this what you were looking for?
I have a static web page would has to be very long horizontally for display a sequence of images and text. (around 50000x1024 pixels in whole).
Would like to ask what is the easiest way to make a "always on top" navigator, which display a small thumbnail of the whole web page. When a user clicks on the thumbnail, the web page will scroll accordingly.
Are there any framework or tool or jquery plugin for doing this? Thank you very much.
You could try using the jquery plugin http://demos.flesler.com/jquery/scrollTo/