I'm very new to jQuery so only using the plug ins at the moment. I have downloaded a carousel slider which you manually slide, to view images with text information underneath, then you can click on more (at the bottom of the image/text box) and another box slides to the right with more info etc. I then added text links to this box that slides out to enable the visitor to see the images bigger using the light box plugin.
When I click the text link to open light box (to see the image bigger), the carousel text box that slid out stays in place (over the light box image) so I have to manually click the 'x' in the corner of the carousel box to view the image...
Does anyone have any thoughts on the sort of code I would need to implement into this... would it be adding code to the .js file of the carousel to tell it to close when lightbox is in use????? if so PLEASE what kinda thing would it be?
Try to find the css classes of your lightbox popup and of your carrosel and set the biggest z-index to lightbox div and a not so bigger to the carrosel div. In this way the first will appear over the last one.
Related
On a website I'm working on I got images inside a container that need to appear over the text on hover. This works smooth BUT..
Whenever an image appears it stays in the same location as the previous hover. I am trying to make the images only appear over the link it is associated with but it won't work.
I have some JavaScript running to randomize the link colors.
You can find the webpage in action over here:http://bravenewfashion.com/menu.html Its on the tab titled 'Biology meets Fashion'
Thanks for the working example. If you nest the image inside of the a tag, it will automatically position itself next to the link. You can then add some rules for top and left to position them over the link like your website does now.
Working JSFiddle Here
I have made this website here: http://dijon-egg.com/Possum/
If you click on green big dot button, it takes you to page2. My problem is I can't figure and fix the menu being too big on page 2 or change view of carousel on page 2 so full carousel can show to us.
As I looked at your source code, I guess you should somehow add the .cbp-af-header-shrink class back to the header, when you click the green button.
so I'm using WP metaslider for a slideshow/gallery display. Everything works great with it, except instead of clicking on the image in the slider and opening its original size in a new window, I would prefer to click on the image in the slider and it enlarging within the slide, similar to the accordion gallery styles, but I want the image clicked on to get larger and the other images to remain the same size or get smaller.
I've tried CSS and javascript shown here but it did not work.
I am open to other plugins that may give me a closer result than this, but the accordion plugin here is the next closet but I still want to be able to see all of the images without them being cut off.
http://kerimthedj.com/new/photos
I have a PHP project, and I am using ADD Gallery image slide show. Here on the main image, (large image) when click on that large image I need to show that in a pop up like Light box.
But I don't know how. Is it work both the add gallery and Light box?
You can't achieve it by just PHP, HTML and JAVASCRIPT. You need Modal Dialog boxes. This will need a good skill in not only HTML & CSS but also JQuery. Here are 14 jQuery Modal Pop ups you might want to use.
http://www.jquery4u.com/windows/14-jquery-modal-dialog-boxes/
Customize them as per your requirements.
I am using this website for making a CSS lightbox.
After I put the button on top of my webpage, the light box is appearing only on the top division (div tag) of the website. I want the light box to appear in the middle of the website. Can anyone help me in resolving the issue? Photos attached before and after. The light box is appearing only on the top not in the center of the webpage.
Before:
==============================================================
After:
I looked at the css in the URL you mentioned. The .white-content and .black-overlay divs shouldn't be inside other divs. Only the link that says "light box here" (or maybe it's a button instead) should be contained in the top div.