Hello
After many hours I am still stuck - pls can you help?
How do I insert Sellerdeck Variable for an image into javascript within <body> so I can insert numerous images for each product?
Pls see my website page here
The fotorama-fancybox query is a slideshow and requires putting javascript into the <head> as well as the <body> tag - I would like to insert Variables into the <body> tag in the red place below.
Javascript above <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="fotorama.css" rel="stylesheet">
<script src="js/fotorama.js"></script>
<script>
$(function() {
$('#my-fotorama').fotorama();
});
</script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Javascript within <body>:
<div id="fotorama"></div>
<script>
$(function () {
var imgData = [
{img: 'images/smallimage.jpg', href: 'images/bigimage00.jpg'}, // img - Fotorama src, href - Fancybox
{img: 'i/04_spikydog.jpg', href: 'i/full/a04_spikydog.jpg', caption: 'Spikydog in fotorama', title: 'Spikydog in fancybox'}, // caption - Fotorama caption, title - Fancybox
{href: 'i/full/a29_hills.jpg'} // When 'img' is missing, Fotorama take 'href'
];
$.fn.noop = function(){return this};
var fotorama = $('#fotorama');
fotorama.fotorama({
data: imgData,
width: 380,
height: 444,
navPosition: 'left',
vertical: 'active',
thumbSize: 100,
aspectRatio: 700/467,
thumbsPreview: true,
caption: 'overlay',
click: true,
onClick: function(data){
var fotoramaClasses = fotorama.attr('class');
var fotoramaTouchStyle = fotorama.data('options').touchStyle;
// fancybox manual call
$.fancybox(fotorama.data('options').data,
{
type: 'image',
index: data.index,
changeFade: 333,
transitionIn: 'elastic',
transitionOut: 'elastic',
padding: 0,
orig: $('.fotorama__wrap', fotorama),
onStart: function(fancybox, i) {
$.extend(fotorama.data('options'), {touchStyle: false});
fotorama
.trigger('showimg', [i, 333])
.removeClass('fotorama_csstransitions')
.find('.fotorama__wrap')
.removeClass('fotorama__wrap_style_touch')
.addClass('fotorama__wrap_style_fade')
.find('.fotorama__frame').not('.fotorama__frame_active')
[fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 0);
},
onClosed: function() {
$.extend(fotorama.data('options'), {touchStyle: fotoramaTouchStyle});
fotorama
.trigger('showimg', [undefined, 0])
.attr({'class': fotoramaClasses})
.find('.fotorama__wrap')
[fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_touch')
[!fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_fade')
.find('.fotorama__frame')
[fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 1);
}
});
// stop fotorama
return false;
}
});
});
</script>
Any help really appreciated!
Thanks
Catherine
After many hours I am still stuck - pls can you help?
How do I insert Sellerdeck Variable for an image into javascript within <body> so I can insert numerous images for each product?
Pls see my website page here
The fotorama-fancybox query is a slideshow and requires putting javascript into the <head> as well as the <body> tag - I would like to insert Variables into the <body> tag in the red place below.
Javascript above <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="fotorama.css" rel="stylesheet">
<script src="js/fotorama.js"></script>
<script>
$(function() {
$('#my-fotorama').fotorama();
});
</script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Javascript within <body>:
<div id="fotorama"></div>
<script>
$(function () {
var imgData = [
{img: 'images/smallimage.jpg', href: 'images/bigimage00.jpg'}, // img - Fotorama src, href - Fancybox
{img: 'i/04_spikydog.jpg', href: 'i/full/a04_spikydog.jpg', caption: 'Spikydog in fotorama', title: 'Spikydog in fancybox'}, // caption - Fotorama caption, title - Fancybox
{href: 'i/full/a29_hills.jpg'} // When 'img' is missing, Fotorama take 'href'
];
$.fn.noop = function(){return this};
var fotorama = $('#fotorama');
fotorama.fotorama({
data: imgData,
width: 380,
height: 444,
navPosition: 'left',
vertical: 'active',
thumbSize: 100,
aspectRatio: 700/467,
thumbsPreview: true,
caption: 'overlay',
click: true,
onClick: function(data){
var fotoramaClasses = fotorama.attr('class');
var fotoramaTouchStyle = fotorama.data('options').touchStyle;
// fancybox manual call
$.fancybox(fotorama.data('options').data,
{
type: 'image',
index: data.index,
changeFade: 333,
transitionIn: 'elastic',
transitionOut: 'elastic',
padding: 0,
orig: $('.fotorama__wrap', fotorama),
onStart: function(fancybox, i) {
$.extend(fotorama.data('options'), {touchStyle: false});
fotorama
.trigger('showimg', [i, 333])
.removeClass('fotorama_csstransitions')
.find('.fotorama__wrap')
.removeClass('fotorama__wrap_style_touch')
.addClass('fotorama__wrap_style_fade')
.find('.fotorama__frame').not('.fotorama__frame_active')
[fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 0);
},
onClosed: function() {
$.extend(fotorama.data('options'), {touchStyle: fotoramaTouchStyle});
fotorama
.trigger('showimg', [undefined, 0])
.attr({'class': fotoramaClasses})
.find('.fotorama__wrap')
[fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_touch')
[!fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_fade')
.find('.fotorama__frame')
[fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 1);
}
});
// stop fotorama
return false;
}
});
});
</script>
Any help really appreciated!
Thanks
Catherine
Comment