Is there any responsive jQuery plugin for displaying image slider and also showing thumbnails on bullets hover.
Tried LayerSlider plugin but the whole image was not visible.
Please help
Thanks in advance
There are a couple that come to mind wowslider or sliderrevolution.I think both should fit this need for you.
see this url you will get some idea http://codepen.io/zuraizm/pen/vGDHl its working good enter code here http://codepen.io/zuraizm/pen/vGDHl
There doesnt seem to be much cloice if your against LayerSlider
you could implement one yourself with something like this with the hover function instead ?
var mainImage = $("#mainImage");
$(".img-container img").hover(function(){
var src = $(this).attr("src");
$("#mainImage").attr("src",src);
});
mainImage.on("click",function(){
$(this).css("transform","scale(2)");
});
Related
I want to give my wordpress gallery images some nice layout, but I don't even know how to start. Could you help me out?
This is how far I've got, but I think this is wrong on so many levels. I want to have a figcaption under each image with their title. How should I approach this?
jQuery(document).ready(function($) {
var alt = $(".attachment-thumbnail").attr("alt");
$('.attachment-thumbnail').after('<figcaption><h5 class="centered">', alt , ' </h5></figcaption>');
})
Concatenate like this:
$('.attachment-thumbnail').after('<figcaption><h5 class="centered">' + alt + '</h5></figcaption>')
I'm creating a slideshow with 5 frames (each of which will have its own slideshow of images) with huge images and it takes some time for the first few images in each frame to be loaded(the rest of the images are loaded really fast). So I was thinking I could preload a simple black images (the background is black) and then start my slideshow once I know the images have loaded. Also, the slideshow images are dynamic, ie their urls change every day.
Does anyone know how I could do that? Because what I've found online only preloads an image but says nothing about how to start my slideshow after that.
Or if anyone has a better solution, please let me know!
FYI, for the slideshow I've used PHP to extract the image urls into a file and JavaScript to read them from it and display them in the slideshow.
Thanks!
A good way to preload images is to load them outside of the frame using css with position: absolute, i can remember reading that using display: none; it would not get downloaded by Safari.
This seems to be an elegant way to precache the images.
"Per Paul Irish, the canonical plugin for detecting image load complete events is now at:
https://github.com/desandro/imagesloaded"
Source: jQuery event for images loaded
This should work
/*You could populate this array through an xml to something if there are too many images*/
var arrUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
var nLoadCount = 0;
for(var i=0;i<arrUrls.length;i++)
{
var oImage = new Image ();
oImage.onload = function ()
{
nLoadCount++;
if(nLoadCount == arrUrls.length)
{
/*Show your content here*/
}
}
oImage.src = arrUrls[i];
}
I am using the Gallery Snippet on MODx Revolution 2.1.5.
I am calling out the basic Gallery Snippet along with the specified Album.
I am trying to link Fancybox (jQuery Lightbox) up to the Thumbnails and images.
This is what MODx Outputs on the Resource:
<div class="gal-item">
<a href="path/to/page/test.html?galItem=1&galAlbum=1&galTag=">
<img class="" src="/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F1%2F4.jpg" alt="lorem-ipsum-2.jpg" />
</a>
</div>
I have selected the content correctly, When I click on the image wrapped in the link tag I get this message:
The requested content cannot be loaded.
Please try again later.
How can it not be loaded? It's loading the Thumbnail and it needs the original image to create the Thumbnail. How can it not find the image?
Note: I am using the default setup for this Add-on.
Thank you!
As AlexC has mentioned I reckon it's to do with your big image path. Have you tried going to that URL direct and seeing if the image loads. You could trying removing the fancybox code and then click on the thumb and see if the link works as normal. The image should load on it's own in the browser window.
I can be am lots of causes why id does like that.
I think what it can be, you try to load content before you have this guy, I mean use some Ajax and it loads after you apply the "fancybox"
you can try this :
remove the "fancybox" classname
and use this code :
$(".gal-item").live("click", function(){
var $href = $(this).find("a").attr("href");
var $href = $(this).attr("href");
$.fancybox({
href:$href
});
});
I have seen some good scripts come by but not one i really could use.
My website is php sql driven and i like to change the links on the site with a image
from thumbshots.
The code i have so far is:
<?php echo openld_htmlspecialchars($link['title']); ?>
And as far as the script i have go like:
$('.post-body a').each(
function(){
$('<img />').attr('src','http://open.thumbshots.org/image.aspx?url='+encodeURIComponent(this.href)).replaceAll($(this));
});
I used the .replaceAll function but it shows only the pictures and are not click links.
I used .insertAfter but then the text link keeps showing.
It's probably not a huge change in the script code but i don't seem to find the answer on my question.
Thanks
I hope that what you are looking for ...
$('.post-body a').each(function(){
$(this).html("<img src='http://open.thumbshots.org/image.aspx?url="+encodeURIComponent(this.href)">");
});
I have google custom search, by default the search box has got background image, I can remove that image, But not able to replace with my image. so Is there a way to do this.
Adding this to my CSS worked for me:
.cse input.gsc-input, input.gsc-input {background-image:none !important;}
Yes! You can do this!
Please find particular id or css for that and then use CSS according to that id or CSS and make sure you add !important at end it will works for you.
To remove the Google Custom search watermark you need to run a java-query infinite looped code it can't be done by adding a one time running code since every time you will click the search input field he code will rerun from the server side and the watermark will reappear.
the exact code you need to do is listed below but to achieve the desired result you must import Jquery liberary file from link jquery.com download/ and link it to your page
to link it to your page do so.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
the actual code to hide watermark is.
<script>
$(document).ready(function() {
setInterval( function()
{
$("#gsc-i-id1").css("background-image","none")
},1/*Time*/);
});
</script>
because the ID of the search box is " gsc-i-id1 " so the code will work even if you click and unclick the field.
Please adjust the time of the function to your preference for better performance better keep it less than 100 mile seconds
check the live performance of code by clicking the link below.
http://jsfiddle.net/atulc007/tHQAD/1/
You have to customize GCSE which is given in your code. To explain in detail, you have to select this url in your code - "http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en". Then paste and search this url in your browser. You will get the sorce code of that java script. In that find an image .gif link and replace with your image and save it as .js file and replace the link and upload. Hope you will enjoy :)