conflict between Jquery slider html5 animation and cycle - javascript

is the header html5 sometimes works and sometimes not at one glance with the cycle slider. Both use Jquery and I think there must be a mistake. In Chrome console gives me the following:
Uncaught TypeError: Object #<Object> has no method 'okToLaunchComposition' head_edgePreload.js:5
edgeCallback head_edgePreload.js:5
(anonymous function) head_edgePreload.js:2
t head_edgePreload.js:2
d head_edgePreload.js:2
I.b.onreadystatechange.b.onload head_edgePreload.js:2
I head_edgePreload.js:2
(anonymous function)
Here you have the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLOG</title>
<script src="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/jquery.min.js"></script>
<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/estilo-pagina-css.php" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/jquery.cycle.all.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#slider1').cycle({
fx: 'fade', //'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
speed: '600',
timeout: '700000000',
next: '#next',
prev: '#prev',
pager: '#thumb',
pauseOnHover: true, // if you hover pauses the slider
startClockOnMouseOut: true, // if clock should start on MouseOut
manualAdvance: true,
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="43" height="29" /></li>';
}
});
});
</script>
<script language="javascript">
/**
* Adobe Edge DOM Ready Event Handler
*/
jQuery.noConflict();
jQuery(window).ready(function() {
jQuery.Edge.initialize(symbols);
});
/**
* Adobe Edge Timeline Launch
*/
jQuery(window).load(function() {
jQuery.Edge.play();
});
</script>
<style type="text/css">
#contenedor {
width: 900px;
margin: 0 auto;
height: 100%;
background-color: #000000;
}
</style>
<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/estilo-galeria.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera" >
<object id="EdgeID" type="text/html" width="900" height="167" data-dw-widget="Edge" data="<?php $_SERVER['DOCUMENT_ROOT']?>/head/Assets/head.html">
</object>
</div>
<div id="botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/botonera.php"); ?></div>
<div id="sombra-galeria-botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/botonera-galeria.php"); ?></div>
<div id="para-contenido"></div>
<div id="centro_galeria"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/includes/piragua.php"); ?>
</div>
<div id="para-contenido2"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/presentacion-galeria.php"); ?></div>
<div id="separador"><img src="<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/separador.png" /></div>
<div id="sha-do">
</div>
<div id="pie"><?php include($_SERVER['DOCUMENT_ROOT']."/pie.php"); ?></div>
</div>
</body>
</html>
The page example:
http://bolivar.uphero.com/

Related

When using html2pdf.js library to render a PDF , iframe elements aren't rendered?

I am trying to use the html2pdf.js library to render a section of my html to a pdf which I can download. I have it all mostly working except for that any iframe elements I have on my page are not rendered to the pdf and are just not existent? Here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[CSS/JS Files - Start]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" ></script>
<script type="text/javascript">
$(document).ready(function($)
{
$(document).on('click', '.btn_print', function(event)
{
event.preventDefault();
//credit : https://ekoopmans.github.io/html2pdf.js
var element = document.getElementById('container_content');
//easy
//html2pdf().from(element).save();
//custom file name
//html2pdf().set({filename: 'code_with_mark_'+js.AutoCode()+'.pdf'}).from(element).save();
//more custom settings
var opt =
{
margin: 1,
filename: 'pageContent_'+js.AutoCode()+'.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
});
});
</script>
<style>
#container_content{
margin:auto;
width: 50%;
border: 2px solid lightgray;
box-shadow: 2.5px 10px lightgray;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-center" style="padding:20px;">
<input type="button" id="rep" value="Print" class="btn btn-info btn_print">
</div>
<div class="container_content" id="container_content">
//iframe src tag shortened for brevity
<h1>PTS Usage</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
<h1>Top Subscriber</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
</div>
</body>
</html>
So everything except the iframe elements within my are rendered to the pdf that downloads on the click of the button. Is there a way to fix this with html2pdf or should I use a different JavaScript library?

Fancybox wrong dimension

I'm using Fancybox inside a Codeigniter View, but when I click the anchor I get this "strange" dimension:
I don't get why. I tried to change pdf section several times, changing height,width,autosize,autodimension, but everyime with no results. Here the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" src="http://fancyapps.com/fancybox/source/jquery.fancybox.css"></script>
<link rel="stylesheet" src="<?php echo base_url('/Fancybox/source/helpers/jquery.fancybox-buttons.css'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/source/jquery.fancybox.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/lib/jquery.mousewheel-3.0.6.pack.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/source/helpers/jquery.fancybox-buttons.js'); ?>"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$('.imagen').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
],{
// href: this.href,
helpers: {
overlay: {
opacity: 0.3
} // overlay
//, buttons: {}
} // helpers
}); // fancybox
}); // click
$('.video').click(function(e){
e.preventDefault();
parent.$.fancybox({
href: this.href,
width: 560,
height: 315,
type: 'iframe',
helpers: {
overlay: {
opacity: 0.3
} // overlay
} // helpers
}); // fancybox
}); // click
$(".pdf").click(function(){
parent.$.fancybox({
type: 'html',
width: 560,
height: 315,
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
},
helpers: {
overlay: {
opacity: 0.3
} // overlay
}
}); //fancybox
return false;
}); //click
}); // ready
/* ]]> */
</script>
<script>
$(".fancypdf").click(function(){
$.fancybox({
'width':400,
'height':1200,
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=100,0,0" type="application/pdf" height="100%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<a class="pdf" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>
Update:
This is the image result with your code:
Opening PDF files in fancybox can be as simple as setting the special class data-fancybox-type="iframe" in your anchor like you did :
<a class="pdf" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>
... then use a normal fancybox initialization script like :
jQuery(document).ready(function($) {
$(".pdf").fancybox({
// API options
}); // fancybox
}); // ready
See JSFIDDLE
No need to over-complicate things ;)
PS. Doesn't really matter whether you are using codeigniter or not

Rotate and move with JQuery not working

I need to rotate and move an image at the same time, actually works just one time, but then just move and not rotating.
This is what i have:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain(){
$(".cartman").hover(MoveCartman,Normal); //on hover Eric Cartman
var v1=100; //variable to move Cartman
function MoveCartman(){
$(this).attr("src","CartmanNude.png");
$(this).css({
"margin-top":v1+"px",
"transform":"rotateZ(-360deg)",
"transition":"1s"
});
if (v1<200){v1+=100;}
else {v1=0;}
}
function Normal(){
$(this).attr("src","CartmanNormal.png");
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="CartmanNormal.png">
</div>
</div>
</div>
</body>
</html>
I think this should work fine but I dont know why the function on hover is not working more than just 1 time.
Sorry for my bad english and thanks.
Try substituting lowercase d for D at doctype declaration , adding all to transition value before duration ; css "margin-top": "0px" , "transform": "rotateZ(0deg)" to Normal function
.cartman {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain() {
$(".cartman").hover(MoveCartman, Normal); //on hover Eric Cartman
var v1 = 100; //variable to move Cartman
function MoveCartman() {
$(this).attr("src", "http://lorempixel.com/100/100/cats");
$(this).css({
"margin-top": v1 + "px",
"transform": "rotateZ(-360deg)"
});
if (v1 < 200) {
v1 += 100;
} else {
v1 = 0;
}
}
function Normal() {
$(this).attr("src", "http://lorempixel.com/100/100/technics")
.css({
"margin-top": "0px",
"transform": "rotateZ(0deg)"
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
</div>
</div>
</div>
</body>
</html>

Jplayer Playlist Fullscreen not working

I try to blow up a video in the JPlayer Playlist to fullscreen (full size). But the size always stays the same.
Here the source:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test Playlist</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
$("#jquery_jplayer_1").jPlayer("option", {"fullScreen": true});
var playlist = [
{
title:"Big Buck Bunny Trailer",
artist:"Blender Foundation",
m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
}
];
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v",
fullScreen: true
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-full">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 100%; height: 100%;"></div>
</div>
<div class="jp-playlist" style="display:none;">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Unable to play your Video</span>
</div>
</div>
</body>
</html>
In the HTML I see that there is a style on the element that just always stays the same. 480px x 270px. I tried to add a style with a different size but it seems that it is always overwritten.
<div id="jp_container_1" class="jp-video jp-video-full jp-video-270p">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 480px; height: 270px;">
<img id="jp_poster_0" style="width: 480px; height: 270px; display: none;">
<object id="jp_flash_0" width="1" height="1" name="jp_flash_0" data="jplayerd/js/Jplayer.swf" type="application/x-shockwave-flash" tabindex="-1" style="width: 480px; height: 270px;">
</div>
</div>
If I use only the Jplayer without the playlist following code is working:
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="jplayerd/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
})
.jPlayer("option", {"fullScreen": true})
.jPlayer("play");
},
swfPath: "jplayerd/js",
supplied: "m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
smoothPlayBar: true,
keyEnabled: true
});
});
//]]>
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-360">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>
It seems like the fullScreen option is not correctly parsed to the player. Can somebody tell me how I can get this working with the playlist addon?
I'm using JPlayer 2.5.0.
Remove the line fullscreen: true from your options variable
New code
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v"
};
Working Demo
Refer more from here for jplayer playlist

how to create JQuery picture viewer with next and back buttons

Am Looking for help to solve this problem i would like to create a simple image viewer with the following specifications.
MySQL Fetch Images
User Click One Image to view (picture-viewer popup, selected image
shown)
User be able to see NEXT image by clicking NEXT
User be able to see PREV image by clicking PREV
On ESC picture-viewer closed
Since am not good in JavaScript Nor JQuery so i just applied the basic to produce the following code which is not able to meet minimum expectations. Instead of showing the user selected image is showing the first image from the unordered list and is not working on IE unless i apply auto start the function i don't need. NEXT/PREV picture has to be shown only if user click next/prev.
<script language="javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
var cur = $('.ppt li:first');
var interval;
$('#fwd').click( function() {
goFwd();
showPause();
} );
$('#back').click( function() {
goBack();
showPause();
} );
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
// close em_picture on esc press
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
em_picture_close();
}
}
function em_picture_close(){
document.getElementById('b1').style.overflow='auto';
$("#em_picture").hide();
$("#em_viewer").hide();
$(".images_tab").show();
$("#chart").show();
}
</script>
HTML
<div id="images_container">
<div id="em_picture" style="display:none;">
<div id="loadimage">
<ul class="ppt">
<li><img src="moments/1372072563PH.png" class="imgview" border="0" id="56"></li>
<li><img src="moments/1372084261art.jpg" class="imgview" border="0" id="3"></li>
<li><img src="moments/1372084531Hot.jpg" class="imgview" border="0" id="6"></li>
<li><img src="moments/137207211166.jpg" class="imgview" border="0" id="40"></li>
</ul>
<span class="prev" id="back" style="display:none" title="prev image"></span>
<span class="next" id="fwd" style="display:none" title="next image"></span>
</div>
</div>
</div>
<!-- table where the first image can be selected to be previewed -->
<table cellpadding="0" cellspacing="0" border="0" class="imagestable">
<tr>
<td id="" class="album_image">
<span class="moments_details" style="display:none;">share . hide . delete</span>
<img src="moments/1372072563PH02053J.JPG" class="my_em_moments" border="0" id="showme">
</td>
</table>
to those who can figure out this in other ways please do so, already made working code is accepted
Thanks and regards
ok for your ease, I'm eleborating it step by step:
download the files from the link.
place the lib and source folder in another folder.
place your file in which you're coding in the same folder.
place all images in same folder or whereever you want to place them
and write the code as
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox').fancybox(); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>
As you want to create something like picture gallery, jQuery fancybox will be the best option for it. The simple and same as your requirements. please see here.
ok try this code :
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
}); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$(".mqimg").mouseover(function()
{
$("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />");
})
$(".mqimg").mouseout(function()
{
$("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
})
});
</script>
<style>
.mqimg{ cursor:pointer;}
</style>
<div style="position:relative; width:100%; height:1px; text-align:center;">
<div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
</div>

Categories

Resources