Loading images from database to Jquery Vegas Slideshow - javascript

I´m using the plugin Jquery Vegas Slideshow in a project and I'm trying to load images directly from my database into the slideshow script.
I have it running with the following code:
<script type="text/javascript">
jQuery.vegas('slideshow', {
backgrounds:[
{ src:'images/slider/slider_01.jpg', fade:2500 },
{ src:'images/slider/slider_01.jpg', fade:2500 },
]
})('overlay', {
src:'images/slider/overlays/06.png'
});
</script>
How can I populate the background parameter using Ajax?
I've read the documentation but there is no information about any server side language.

By checking the source code of vegas plugin on github, there does not seem to be any method to update background images dynamically after plugin is initiated. But as there is one method called destroy I would suggest to try following code which destroys the background and overlay assigned and re-initialize the plugin with new set of images.
// Define backgrounds array
var bgimages = [
{ src:'1.jpg', fade:1000 },
{ src:'2.jpg', fade:1000 },
{ src:'3.jpg', fade:1000 },
{ src:'4.jpg', fade:1000 }];
//destroy vegas object background
$.vegas.desroy('background');
//destroy vegas overlay background
$.vegas.desroy('overlay');
// Pass shuffled array to Vegas
$.vegas('slideshow', {
delay:5000,
backgrounds: bgimages
}) ('overlay');

Try this Code :
$('body').vegas({
overlay: true,
transition: 'fade',
transitionDuration: 4000,
delay: 10000,
color: 'red',
animation: 'random',
animationDuration: 20000,
slides: [
{ src: 'img/2.jpg'},
{ src: 'img/3.jpg' },
{ src: 'img/4.jpg' },
{ src: 'img/5.jpg' }
]
});

Related

echarts Media queries not working with Bootstrap (carousel)

I have a bootstrap carousel with 2 slides. Both the slides uses bootstrap grids of 2x2 to display charts on them. They are working fine , however I am trying to implement responsive media queries and can't seem to make it work. I used baseOptions and media options to define but the charts do not load up and the console doesn't show any error.
I have tried to define the <div> container with inline style width and height i.e. style="width: 100%;height:400px;" and I have also tried to define the width and height in CSS like so-
.mychart {
width: 100%;
height: 400px;
}
The javascript looks like below.
<div id="chart1" style="width: 100%;height:400px;"></div> //with inline style
<div id="chart1" class="mychart"></div> //with CSS class
var myChart1 = echarts.init(document.getElementById('chart1'));
var lpnArr = [101, 43, 10, 250];
option = {
title : {
text: 'My data Pie',
subtext: 'Data as of last batch',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['Processed','Unprocessed','In RIB','Errors']
},
color: ['#4bc14f','#ff7f50','#da70d6','#d8316f'],
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: false},
magicType : { show: false},
dataZoom : { show : false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Processed',
type:'pie',
radius : ['50%', '70%'],
startAngle : 230,
center: ['35%', '50%'],
itemStyle : labelFormatter, //custom formatter
data: lpnArr //load chart with data array lpnArr
}
]
}
var mediaQuery = [
{
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
minAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
maxAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
},
{
query: {
maxWidth: 500
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
}
];
myChart1.setOption({baseOption : option,
media : mediaQuery});
if I use it without the media query it works just fine. like this
myChart1.setOption(option);
Using the media query, as per the documentation along with baseOptions and media, the charts simply don't load and it doesn't show me any error in the console as well, so I am not sure if I am using it correctly or not.
By the way, I also have this in the end of the script to be able to resize the charts when the window is resized but then I realized that this is not truly responsive -
$(window).on('resize', function(){
myChart1.resize();
});
The bootstrap chart elements are <div> elements within other div with a class of BS container-fluid. The carousel code can be found in this JSFiddle.
Media query was introduced in echarts version 3, whereas I have been using version 2 and thus it wasn't working. It's extremely odd that using media with version 2 doesn't show any kind of error, neither does baseOption show any error so I was left scratching my head. Documentation isn't clear enough to say that media queries is only supported in version 3. So after scouring through the code and GitHub threads for hours and trying out all their js versions I came to this conclusion.
The downside of using version 3 echarts is that it is missing the "Tree" chart type and it's a lot more pickier than any prior version. Also, it's twice as much slower than version 2.

jQuery qTip relative path for image source

Hi I have a jQuery qTip tooltip in my web app and I am trying to set a relative path for an image in the tooltip.
The code I have is:
$('#behind-the-behaviour span[title]').qtip({
content: { title: { text: "Behind the Behaviour" }, text: "<img src='~/Images/behindbehaviour.png'/>" },
style: { border: { radius: 5 } },
show: { effect: function () { $(this).show(); } },
hide: { effect: function () { $(this).hide(); } },
position: { my: 'rightTop ', at: 'left center', target: this, viewport: $(window) },
});
It needs to be relative as this is a master page that is inherited by pages in different folders. When the path is set to just 'Images/behindbehaviour' the foldered pages can't access it
How do I make the jquery find the images through the relative path? Thanks!
Try:
text: "<img src='/Images/behindbehaviour.png'/>"
without the tilde (~)
That works for me.

Different background slides for mobile/screen

I want to have a different set of image display when your are on a mobile device. I am using Vegas Jquery Slider http://vegas.jaysalvat.com/
My questions is a bit vague, and I could find what I am needing. Would I just use the window size jquery? or an if.. else... statement?
Here is my code.
<script type="text/javascript">
$.vegas('slideshow', {
backgrounds:[
{ src:'img/familyoutsidehome5-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome3-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome4-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome-dark.jpg', fade:1000 }
]
});
</script>
<script type="text/javascript">
$.vegas.defaults = {
background: {
src: null, // defined by Css
align: 'center',
valign: 'center',
fade: 0,
loading true,
load: function(){},
complete: function(){}
},
slideshow: {
step: 0,
delay: 5000,
backgrounds: [],
preload: false,
walk: function(){}
},
overlay: {
src: null, // defined by Css
opacity: null // defined by Css
}
}
</script>
If I am correct, what you want is the website being responsive based on the screen size. You don't even need to use javascript. css mediacan do it:
#media (max-width: 500px) and (max-height: 500px) {
div.element1 {
background-image: url('background1.png');
}
div.element2 {
background-image: url('background2.png');
}
}
And you can just change the classes in javascript to change background image.
If you want to add transition effects you can also do it in CSS3 by adding a transition:
div.element {
transition: background-image 1s ease-in-out;
}

Access Wordpress slider plugin option from function

When using "WP Vegas" wordpress plugin (image slider) the options are set this way:
<script>
jQuery(function () {
jQuery.vegas('slideshow', {
delay: 8500,
backgrounds: [{
src: 'some-image.jpg',
fade: 1250
}, {
src: 'other-image.jpg',
fade: 1250
}, ]
})
});
</script>
Is it possible to access the "backgrounds" option from a javascript function?

How can I combine inline elements with images in magnific popup having a displayed gallery

I am using Magnific Popup.
I can get it to work with galleries.
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true,
navigateByImgClick: true,
}
});
});
I can also actually mix inline elements with images which is basically what I want:
$('#open-popup').magnificPopup({
items: [
{
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
title: 'Peter & Paul fortress in SPB'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe' // this overrides default type
},
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div class="white-popup">Popup from HTML string</div>', // HTML string
type: 'inline'
},
{
src: '#my-popup', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image' // this is a default type
});
My problem is that in the mixed example, I don't have the thumbnail "gallery" displayed, what I basically want is thumnail images, that when clicked behave like a gallery but with one inline element in between.
The inline element will have a thumbnail (and actual image), but when clicked will be an inline element.
I was able to do it with fancybox and you can see here if you click the thumbnails, it might help clarify what I need. (I am trying to achieve the same thing with Magnific popup with because of the lack of mobile support of mobile).
You may add mfp-TYPE CSS class to thumbnail element that should have non-default content type. http://dimsemenov.com/plugins/magnific-popup/documentation.html#content_types
jQuery(document).ready(function($) {
$('.owl-wrapper').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: 'The image #%curr% could not be loaded.',
},
callbacks: {
elementParse: function(item) {
if(item.el.context.className == 'video-link') {
item.type = 'iframe';
} else if(item.el.context.className == 'inline-link') {
item.type = 'inline';
} else {
item.type = 'image';
}
}
},
});
});

Categories