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
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.
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/
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!
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"],
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!