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
Related
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.
I came across an issue with the background image of a div not showing in Chrome.
A website I'm working on has two image containers sitting on top of another: The one with the lower z-index shows the currently selected image while the one with the higher z-index is used to preview other images when the user hovers over an item in the navigation.
Basically, what is supposed to happen is that every time the mouse cursor is moved from one navigation item to the next, the old preview image is saved as the background of the preview image container and then the actual image in the previewing container is hidden (without it being noticed, since the image is still in the background), swapped for the new image and then faded in. The fade is supposed to happen directly from the old image, which is why I'm setting the old image as a background before.
Now, this works perfectly everywhere but in Google Chrome, where the background image just won't show. The weird thing is, I've used a debugging break to take a closer look and noticed the background image is actually correctly set (meaning it is correctly listed in the CSS of the element at the time), but it is not shown in the browser.
var previewDelay;
$("#cnt-navigation_secondary").find(".txt-navigation_secondary").mouseenter(function(){
var newImage = $(this).find("img").attr("src");
var oldImage = $("#img-content-preview").attr("src");
previewDelay = setTimeout(function(){
$("#cnt-content-preview").show(); //The previewing container is shown (in case it was hidden before).
$("#cnt-content-preview").css({"background-image":"url("+oldImage+")"}); //The old image is set as the background of the previewing container
$("#img-content-preview").hide(); //The image inside the previewing container is hidden. All browsers but Chrome now show still show the same image, as it is in the background, but Chrome doesn't, even though it's visible in the CSS.
$("#img-content-preview").attr("src", newImage); //The source of the hidden image is set to the new image.
$("#img-content-preview").fadeIn(400); //The new image is faded in.
},100);
}).mouseleave(function(){
clearTimeout(previewDelay);
});
You can see the entire thing in action here: http://www.haasarchitektur.at/index.php?main=1&siteid=403
Try hovering over items in the architecture subnav. In Firefox, for example, the previewing images will fluidly change from one project to another while in Chrome you'll always briefly see the element in the back blink through as the background of the previewing container is not properly set.
I'm kind of at a loss of where this behaviour is coming from, so any help would be greatly appreciated. ; )
Thank you & best regards,
Michael
The background image doesn't seem to load because it is quite a large file? I tried your example setting the background colour to red instead of changing images and it works fine and blocks the original image from being shown. You may need to work out a way to have the background-image already placed in a div so it is already loaded in the browser..
As you have loaded the images already in your navigation menu, you could tinker with the css so that jquery overlays THIS image until the real image is ready?
I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
I've created a slideshow on a website (sorry, new user and can only post one link) using this method: http://iamacamera.org/sandbox/linkedphotoshuffler/ I only changed the specified variables, and it works great, except that about 10 or so pixels of the right edge of the image currently in the background are showing. I've checked, and the images are exactly the same size, so there appears to be a shift left of the foreground image or shift right of the image in the background. How do I ensure they are perfectly aligned or hide the background image so it is not visible to users?
Disable any CSS not necessary to make this work and see if maybe one of the CSS rules for your site is accidentally targeting the div holding the image and applying a margin or padding.