I am currently trying to insert image with Javascript attached to it and for some reason it works on Firefox but the images or icons do not display on IE.
I have done the coding like this:
<a href="javascript:changesize('xxx')">
<img src="Images/changesize.jpg" title="Change Text Size">
</a>
<a href="javascript:changefont('xxx')">
<img src="Images/changefont.jpg" title="Change Font">
</a>
<a href="javascript:changeline('xxx')">
<img src="Images/changeline.jpg" title="Change Line Spacing">
</a>
<a href="javascript:changecolors('xxx')">
<img src="Images/changecolors.jpg" title="Change Text/Backgroud Colors">
</a>
You could try:
<img src="Images/changeline.jpg" title="Change Line Spacing" onclick="changeline('xxx')">
Related
I was wondering if anyone knew of a way to add a tag to a Flickity image slider? Here's what I have for my slider but it messes with the functionality of the slider itself:
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "autoPlay": true, "wrapAround": true}'>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look-out" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="One World Trade" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose" />
</a>
</div>
I have another JS file with some basic scrollTo jQuery code, but other than that I just need to figure out how to get the links on the images to work. Any ideas?
I fear that you can't have both touch response and link. But you can add an element to link inside of the element that you are sliding.
<div class="hero-carousel__cell hero-carousel__cell--2 is-selected" style="position: absolute; left: 100%;">
<div class="hero-carousel__cell__content">
<p class="slogan slogan--easy">Easy to use.</p>
<p class="slogan slogan--fun">Fun to flick.</p>
<p class="slogan slogan--tagline">Flickity makes carousels, galleries, & sliders that feel lively and effortless.</p>
</div>
</div>
This is a piece of the example of Flickity web, you can see I added a link to a element. If you need to have images you can set them as background-image in the wrapper div, and put a clickable link inside not covering the whole div.
I am creating images grid and I am using the following library Justified Gallery. The hover effect is working fine for the img-alt attribute. but I want to display some icons with links on the hover.
Just like the following picture
Take a look the the following Fiddle
https://jsfiddle.net/zvj2o7fy/1/embedded/result/
<div id="justifiedGallery">
<a href="#" title="What's your destination?">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Just in a dream Place">
<img alt="Just in a dream Place" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Il Capo at Palermo">
<img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
</a>
<a href="#" title="Erice">
<img alt="Erice" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/127/300/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/440/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/227/340/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
</div>
Please help me to create this.
as per documentation(http://miromannino.github.io/Justified-Gallery/captions/)
remove title attribute and add a div with class caption
just like
<a href="#">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
<div class="caption">
<div class="icon-cart">
<img src="https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png"/>
</div>
</div>
</a>
in this div you can add any thing.
If you need links on caption, need a small structure change like
<div id="justifiedGallery">
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
</div>
Justified Gallery recommends using the Colorbox jQuery library inside of a callback to achieve what you are trying to do. Colorbox controls a caption lightbox div that gets shown on hover.
If you look at the Colorbox 'multiple galleries with one call' demo, you'll see you can add custom icons for each image by adding a hidden div called caption inside of the gallery container:
<div class="container">
<a href="image.jpg" class="jg-entry cboxElement">
<img alt="Alt Message" src="image.jpg">
<div class="caption">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</a>
</div>
To invoke the captions and make them appear via JS, you'll make your call to Colobox inside of justified gallery's callback via the .jg-complete class. Inside of the callback, the colorbox library is invoked with the necessary parameters (like opacity and transition shown in the code sample below) to get your icons fading into view exactly you would like.
JS:
$('.container').justifiedGallery({
rowHeight : 50
}).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
You can dynamically replace the caption with whatever you like. Here's a quick solution.
$("img").mouseenter(function(){
$(this).siblings(".caption").html("<div><a href='#'><img src='source'></a>");
});
Use jquery hover selector to set the display of icons
The default display of icons should be none in css
This should help
https://codeshare.io/IGavT
I am getting the following error in the big three (IE, Chrome, FF):
Uncaught SyntaxError: Unexpected token }
When I look at the rendered html in dev tools I see this:
<div style="...">
<a style="..." onclick="LaunchTemplateBrowser(" href="#" false;'="" 'x_project');return="" c74767f5-6ce4-4975-9778-e4f9ad1e5ded',="">
<img style="..." src="...">
</a>
<span style="...">Add from template</span>
<br><br>
<a style="..." onclick="LaunchItemInsert();return false;" href="#">
<img style="..." src="...">
</a>
<span style="color: rgb(139, 139, 139);">Add single item</span>
</div>
The important lines above are 2 and 7. On line 2 I am passing a guid and that seems to be throwing it for a loop?
The source code is:
<html>
<head></head>
<body>
<title></title>
<div style="...">
<div style="...">
<a href="#" style="..." onclick="LaunchTemplateBrowser('C74767F5-6CE4-4975-9778-E4F9AD1E5DED', 'x_project');return false;" >
<img style="..." src="..." />
</a>
<span style="...">Add from template</span>
<br /><br />
<a href="#" style="..." onclick='LaunchItemInsert();return false;' >
<img style="..." src="..." />
</a>
<span style="...">Add single item</span>
</div>
</div>
</body>
You should escape the quotes before using them.
Either by prefixing them with \ or using a combination of single and double quotes.
The HTML structure looks like this:
<div id="gallery" class="container">
<div class="thumbs-holder">
<div class="thumbs-center-area">
<div class="thumb-back">
<a class="fancybox" href="images/image1.jpg">
<img class="thumb" src="images/thumbnails/image1.jpg" title="Image 1" />
</a>
</div>
</div>
</div>
<div class="thumbs-holder">
<div class="thumbs-center-area">
<div class="thumb-back">
<a class="fancybox" href="images/image2.jpg">
<img class="thumb" src="images/thumbnails/image2.jpg" title="Image 2" />
</a>
</div>
</div>
</div>
...
</div>
With the code above, when I click the thumbnail, it opens lightbox image (fancybox), but can't get the "next" and "prev" buttons in the lightbox to get the image from next div. It shows only the image from one div.
How can I make fancybox "prev" and "next" works with HTML structure like this?
I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum
The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?