Open image on the current page - javascript

So I'm trying to make a gallery and when the user click on a picture I want it to open on top of everything in it's original size.
I only have experience with html and css right now but willing to give JS and jQuery etc a try if necessary. Thank you in advance!
(I didn't provide any code since I don't have a problem with it)

this might help you Shadow Box
See the images.
Update:
fancybox demo

Related

how to turn off watermark on wonderplugin carousel

I am using the wonderplugin free version on my website and I would like to get rid of the wonderplugin link in every alternate image. How can I turn it off?
I have tried changing a bunch of codes but they didn't work. All i want to do is remove the link attached on alternate images. Thank You.
Buy Full version to remove this or if you want to use free one try this
As far as free version is concern, the link can be removed by the custom css.
On the edit slider screen of the plugin click on Option tab.
Click on Advance Option and put following css in the Custom CSS box.
div.amazingslider-box-1 :nth-child(3) { visibility: hidden;}
This will hide the link.
Find wonderplugincarousel.js in ..\wonderplugin-carousel-free\wonderplugin-carousel\engine
Find and remove versionmark:"AMFree",
Find showwdefault:true and change to showwdefault:false (be near versionmark:"AMFree",)
It works for me.
Hi I fit this problem like this:
Find wonderplugincarousel.js in
..\wonderplugin-carousel-free\wonderplugin-carousel\engine
Find this.options.mark="WordPress 3D Carousel Trial Version"
Change to this.options.mark=""
I hope it is useful for you

simple jquery lightbox for displaying images

I cant believe I am asking this - but I spend the last TWO HOURS looking for a simple jquery lightbox to give to my students to learn how to implement...
What I need is something that is very simple:
I have a bunch of images and when I click on them I need a lightbox to open with a (different) image that I can specify...I just cant find anything that does simply that. Of course the lightbox will need to behave like a standard lightbox (X- close button, scale to size of image, have a line of caption or so)
something like:
$('.this-image').click(function(){
awesomelightbox.open('new url');
})
Most of the lightboxes I checked open either the same image that was clicked, or has a gazillion options that my students wont understand.
I tried:
- LightBox
- ColorBox
- FancyBox
- VisualLightbox
- Featherlight
Nothing suits my requirement :(
Does anyone know any simple lightbox that does what I mentioned? I would greatly appreciated any pointers.
Actually, using Fancybox you can do it. I went to their "How To" and they have an example. Look at the last bit of code on the page. If you are only trying to display 2 different images you can use their method. Notice how they have a small.jpg and a big.jpg, so it essence they are using 2 different images. This way they can use one image for thumbnail and a larger one for the actual fancy box. Is this what you are looking for?
EDIT: Or if you would like to use my plugin you are welcome to source it from my site. Here is an example, check sourcecode for usage.
http://tylerteaching.com/coolbox/
I'd recommend using Maginific (http://dimsemenov.com/plugins/magnific-popup/), or Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Web image gallery - what has been used creating it?

I have met an interesting image gallery transition surfing the web several times and now I'm interested in how such an elegant solution has been made.
Gallery can be found here: http://nullstuff.com/nullfolio/#/portfolio
The desired effect takes place when toggling between 'Everything' and 'Web Design'.
Could it be made purely with CSS?
Based on the app.js source in the page, it's using the jQuery Quicksand plugin.
To create such elegant gallery JQuery can be used.
You can find several JQuery galleries.
Look at this blog, I found http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
I hope it helps.
First of all
It is not possible to add click events in css.
therefore it is javascript
This is known as an image carousel.
I made my own in jquery.
I can give you the source if you want.
Click on the image to see effect and see the url change and press back button.
You will find the previous page loaded with the effect.Moreover the scrollbar(horizontal) hides after poping which i think is made overflow-x:hidden in css.

Does anyone know of any cool JQuery plugins to display a profile picture and acompaning text in a box?

Ive seen a few however they dont seem to allow you to write much text alongside an image, its mostly a brief title or caption display whereas I have quite alot of text that I would like to be displayed alongside an image. preferably in some kind of light box. Id be very grateful if anyone has any suggestions. Im new to Jquery :)
Have you had a look at jQueryUI's Dialog? It's quite nice and you can just pump any HTML directly into it.
I'm using JQuery galleryview for my project. here is the link on the development server. Click on one of the button for example:
http://ssdev01.uis.kent.edu/VotingApplication/Main.aspx

Website popout page design

I want to have 4 boxes that can be clicked and pop out with text and can scroll.
Similar to the projects page here: http://www.visionslighting.com
However i would like it to be in html/javascript or similar instead of flash.
i have found this: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
which is exactly what i want only with images.
any help is greatly appreciated.
This is easily accomplished with the jquery-ui. They have a function called dialog that you can tell to be a modal(the box that floats on the screen).
I think you're looking for a javascript lightbox. Check out this one: http://defunkt.io/facebox/
You can find even more here: http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

Categories