I'm trying to create an area that can be changed dinamically with arrows, so I'm opting for the html5 slideshows.
I tried to make this work http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/ but it isn't working, this is what I tried to do http://jsfiddle.net/frHV5/
Hope you can help me, thanks in advance
First: you haven't copied the entire JavaScript.
Then the security problem comes. You can use canvas to edit images only on local level.
This means the following wont work:
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
But this will:
<li><img src="1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="3.jpg" width="620" height="320" alt="Power Station" /></li>
In summary: Just copy correctly the javascript, the CSS, copy the images to you machine, edit the URLs in the html and that's it.
Related
I'm using lightgallery.js (https://sachinchoolur.github.io/lightgallery.js) to develop my ASP.NET MVC project.
It seems ok to load some images which have a size of less than 1MB, but the problem here when I use about ~20 pictures (~2MB/picture), Light Gallery will load very slow.
Could you share with me some ideas to overcome this problem?
Thanks for reading.
Hi please check this example lazy load image.
For more detail please check the official link -> Click me
$(document).ready(function(){
$("ul.jsImageUl > li img").lazy({
effect: "fadeIn",
effectTime: 1000
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<ul class="jsImageUl">
<li>
<img data-src="https://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" width="200" height="200" alt="" />
</li>
<li>
<img data-src="https://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" width="200" height="200" alt="" />
</li>
<li>
<img data-src="https://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" width="200" height="200" alt="" />
</li>
</ul>
I want popover on hover of product images in WordPress, i used popover.js also include js and css of bootstrap. my WordPress theme has included bootstrap.
here is my product image code,
<img class="alignnone size-full wp-image-134" src="Projektorer-research.jpg" alt="Projektorer-research" width="268" height="150" />
here i used data-content="test" for example, actually i want to display unordered list over there.
Are you initializing your Popovers? You must initialize them yourself with JS like in the example Snippet.
See docs working example.
$(function() {
$('[data-toggle="popover"]').popover();
});
body,
html {
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" data-toggle="popover" data-trigger="hover" data-content="test">
<img class="alignnone size-full wp-image-134" src="http://placehold.it/350x150" alt="..." width="268" height="150" />
</a>
i think you are trying to display custom(html) content in your popover, if you do like below you can set any content in your popover.
<div id="popover_content" class="row company-logo" style="display: none">
<ul>
<li><img src="images/alico-logo.png" alt=""/></li>
<li><img src="images/national.png" alt=""/></li>
<li><img src="images/traveller.png" alt=""/></li>
<li><img src="images/progressive.png" alt=""/></li>
<li><img src="images/formost.png" alt=""/></li>
<li><img src="images/the.png" alt=""/></li>
<li><img src="images/circle.png" alt=""/></li>
</ul>
</div>
<a id="popx" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="">Click to toggle popover</a>
and initialize your popover like this:
<script>
$(function () {
$('#popx').popover({
html: true,
content: function () {
return $('#popover_content').html();
}
});
;
})
</script>
I want to use custom images as tabs to show and hide divs like this: http://jqueryui.com/tabs/
I also alternate images for the tab that is active but don't know how to implement them properly.
This guy was close but the code is messy and doesn't quite work: http://jsfiddle.net/5FVb7/1/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
This is all of the scripting that the jQuery UI site seems to suggest is needed?
This is my html:
<div id="tabs">
<ul>
<li><img src="img/bt1.png" /></li>
<li><img src="img/bt4.png" /></li>
<li><img src="img/bt2.png" /></li>
<li><img src="img/bt3.png" /></li>
</ul>
<div id="tab1"><p> Words go here innit </p></div>
<div id="tab4"><p> Testa texta </p></div>
<div id="tab2"><p> eeyyeeeeee </p></div>
<div id="tab3"><p> Cheap as chips </p></div>
</div>
My CSS so far is just for positioning and some style - no functionality is present.
I think I'm probably missing something.
Moved your html to FIDDLE, added some net images, and everything works OK.
If you want specific images, you'll have to photoshop them, resize them to fit.
Is this what you're looking for?
HTML for one of the resized images
<li><a href="#tab2"><img height='42' width='42'
src="http://www.twitip.com/wp-content/uploads/2008
/11/twitter-button-small.png" /></a></li>
I've tried unsuccessfully to implement the layout in the attached image. When apllied div with table setting IE brokes, if elements are floated when captions are more than one line the layout is broken again. Any suggestion will be greatly appreciated.!
Layout image:
Here is the CSS
.thumbsHolder {clear:both;float:left;width:100%;overflow:hidden;}
.thumbsHolder ul#prodThumbs {padding-top:20px;margin:0 auto;list-style-type:none;text-align:center;}
.thumbsHolder ul#prodThumbs li {float:left;padding:0 7px;min-height:150px;}
.thumbsHolder ul#prodThumbs li a {font-family:Arial, Helvetica, sans-serif;font-weight:normal;text-decoration:none;font-size:70%;}
HTML
<div class="thumbsHolder">
<ul id="prodThumbs">
<li><img src="thumb1.jpg" /> <!-- image width and height may differ -->
<p>Caption</p></li>
<li><img src="thumb2.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb3.jpg" />
<p>Even longer caption</p>
</li>
<li><img src="thumb4.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb5.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb6.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb7.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb8.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb9.jpg" />
<p>Since we have a wider image at first row, this row must be centered</p>
</li>
<li><img src="thumb10.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb11.jpg" />
<p>Here text also goes down, so if we float layout breaks</p>
</li>
<li><img src="thumb12.jpg" />
<p>Caption</p>
</li>
<li><img src="thumb13.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb14.jpg" />
<p>This is a centered image</p>
</li>
<li><img src="thumb15.jpg" />
<p>This is out last image</p>
</li>
</ul>
</div>
You should know what the maximum size of a thumbnail will be when generated on your site, there must be some limit. Why not wrap your tag into a div set that divs height to the max of a thumbnail. Then align the img in the div. Then you have your p tag below for captions
I want the external controls (below) to be images. But nothing except numbers (in the below order) seems to work.
--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with autoscrolling</h3>
<p>
Autoscrolling is enabled and the interval is set to <code>2</code> seconds.
Autoscrolling pauses when the user moves the cursor over the images and stops
when the user clicks the next or prev button. <code>wrap</code> is set to
<code>"last"</code>.
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>
The above answer helped me solve a similar issue where I needed the external control start number to be '0' rather than '1'. The quoted code on the page has a syntax error in that it doesn't close the function. Should be:
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
var index = $(this).attr("id").split("_");
carousel.scroll(jQuery.jcarousel.intval(index[1]));
//carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
$(".jcarousel-control a").removeClass("active"); //Remove any "active" class
$(this).addClass("active");
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
}); // example ends here
}; // should end here