Adding hyperlinks to a javascript image array - javascript

I'm having a problem with a java carousel. The code is working fine on my page, but I want to add hyperlinks to the images, but I'm unsure how to achieve this. I've tried a few things, but its just caused the code to stop working, and the carousel to drop off the page.
As I say, its all working fine, but as soon as I alter the default code, it falters.
The code I have so far is:
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description"]
['chime.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['redbench.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
Any help is appreciated....

Check out the source here:
http://home.comcast.net/~jscheuer1/side/bgcarousel/demo_linked.htm
Great example. Just add a link into the slide text, and use CSS to style it to the width and height 100% of the slide box.

Related

MixItUp 3 animations isn't working

I updated my portfolio website and converted my MixItUp portfolio from 2 to 3. However, the animations are acting weird. Every time I click on a filter link, some of the portfolio projects fly up over the "Portfolio" title while fading in. I don't like the effects. I can tell that the animation is working when I adjusted the duration, however, I don't know how to fix the rest to make it looks normal like this demo:
https://www.kunkalabs.com/mixitup/
Here's where you can see where the animations are all wrong:
http://kikidesign.net/portfolio
My Javascript code is:
<script>
var containerEl = document.querySelector('.mixitup-list');
var mixer = mixitup(containerEl, { //MixItUp 3 options, 'item' matches the class in the PHP
animation: {
duration: 800,
nudge: false,
reverseOut: false,
effects: "fade scale(0.41)"
}
});
</script>
It's located in footer.php.
I figured out the problem. It's the height. I specific the height of each portfolio piece to be 100% and thus, it messed up the animations.

Preload images with Justified Gallery

I am using Justified-Gallery
to layout my gallery thumbnails. I want to implement a preloader so the images only show once they have been formatted by Justified-Gallery.
I saw this option in the plugin but I couldn't get it to work, waitThumbnailsLoad.
Currently I am hiding the div containing the thumbnails, and then showing it once the plugin has completed. Is this the best way or is there a better way to do this?
HTML
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
JS
// Justify Gallery
$("#justify-gallery").justifiedGallery({
rowHeight: 100,
fixedHeight: true,
captions: false,
margins: 3,
lastRow: 'nojustify'
});
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$(this).fadeIn();
});
Yes you're in the right track, if your current code sort of works, then you can add a parent container to the hidden class, and add a loading animation to it, then use css to position absolute the images or hide the loader, up to you.
<div class="parent-with-loading-animation">
<div class="loading-animation"></div>
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
</div>
Just give the parent div a min-height of whatever you reckon would be the average height of images and a width 100% depending on your layout of course.
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$('.loading-animation').fadeOut();
$(this).fadeIn();
});
Oh boy, on a second visit to the site I found an article on performance; where it states if you add a class of .justified-gallery it will only show the thumbnails once loaded. In all fairness this vital info should have been put in a more prominent spot.
http://miromannino.github.io/Justified-Gallery/performance-tips/

Jquery not resizing image on slider

The problem is that I have an image larger than 477 x 205, but i'll need them for another things, it would be a problem to make 2 or 3 images with diferent sizes. So, I decided to resize it on jquery. The major problem is that i'm new on JQUERY ( please, be patient :B ).
I've read some of the topics, but none helped me, the one that got closer was to add "$('#slides').css('background-size', '477px 205px');":
$(document).ready(function() {
$('#slides').coinslider({ hoverPause: true });
$('#slides').css('background-size', '477px 205px');
$('#slides').css('overflow', 'hidden');
});
but, that didn't solve it, also, it starts at the right size, but when the slider starts looping, it gets a mess again
Change this:
$('#slides').css('background-size', '477px 205px');
To this:
$('#slides').width(477).height(205);
The overflow: hidden will hide the rest of the image.
More relevant code would be helpful in providing better guidance. Have you considered "background-size: cover" yet?
Reference 1,
Reference 2
After 1 week without the solution, i've reached on what I was making mistakes, i was o the .js, when the Js loads, he create his own CSS for the slider, so I had to add the "background-size: size" on it like this:
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop,
'background-size':'477px 205px'
});
as it wasn't fixed a size to it, it would take the real size of the image as default.
Thank you for trying to help me with this issue!

adding links to JavaScript image arrays

I've got some code here for a slideshow that I need to add links to, it is a JavaScript image array that works fine but I am not sure how to add links to each picture.
I'm very newbie with JS.
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [200, 235], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images_ads/image1.jpg"],
["images_ads/image2.jpg"],
["images_ads/image3.jpg"]
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
According to Dynamic Drive, the second key in the image array should be your URL value and the third value is the text you want to display
For instance:
["images_ads/image1.jpg", "http://www.stackoverflow.com", "Your text goes here"],

Trying to fix slideshow (Horizontal + Vertical)

Script here: http://jsfiddle.net/dt5Se/ , or below:
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [720, 478], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/indeximages/1.jpg"],
["images/indeximages/2.jpg"],
["images/indeximages/3.jpg"],
["images/indeximages/4.jpg"],
["images/indeximages/5.jpg"],
["images/indeximages/6.jpg"],
["images/indeximages/7.jpg"],
["images/indeximages/8.jpg"],
["images/indeximages/9.jpg"],
["images/indeximages/10.jpg"],
["images/indeximages/11.jpg"] // no comma for last image
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""})
Is there a way I can make this work for both vertical and horizontal images? It's killing me...
See implementation here: http://www.phillipehan.com/
As you can see the 3rd image is surrounded in black on either side. How can I fix this?
Thanks!

Categories