I know the very basics of HTML and am trying to post an image slideshow on my ebay listings. I have tried the following in order to get Jssor to function:
Downloaded slider-19.0.1 from Jssor slider GitHub.
Tried following the ebay/blog post guide on jssor's website several times with both photobucket and imgur. The final result, as displayed on my ebay listing, was either a display of raw code or one static image that did not slide anywhere. Yes, I did compress it with the Jssor.Compress.exe tool successfully.I have installed and reinstalled the tool via the GitHub.
I have also tried downloading the example source files from the GitHub, from the "examples-no-jQuery" folder as instructed. Yes, I did insert my own links from imgur. Namely, vertical-slider.source.html, and simple-slider.source.html. When compressed, they both appeared as a long string of code in the description of my ebay auction. Yes, I used the HTML editor on ebay, not the plain text description box. However, when directly opened with my web browser (Firefox) the first image was actually displayed (!), But it never slid anywhere and none of the other images were displayed.
I am probably missing one critical step somewhere and I would appreciate it if you could point me in the right direction. Below are the compressed versions, originating from the source examples directly from your website, with my photo links patched in, run with the most recent compressor tool, and they don't work for me They are definitely compressed because they are about 50% shorter than the source files:
The vertical example, from here on the jssor github: (before compression >100 lines)
/*Jssor*/
.jssora08l,
.jssora08r {
display: block;
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
background: url(../img/a08.png) no-repeat;
overflow: hidden;
opacity: .4;
filter: alpha(opacity=40)
}
.jssora08l {
background-position: -5px -35px
}
.jssora08r {
background-position: -65px -35px
}
.jssora08l:hover {
background-position: -5px -35px;
opacity: .8;
filter: alpha(opacity=80)
}
.jssora08r:hover {
background-position: -65px -35px;
opacity: .8;
filter: alpha(opacity=80)
}
.jssora08l.jssora08ldn {
background-position: -5px -35px;
opacity: .3;
filter: alpha(opacity=30)
}
.jssora08r.jssora08rdn {
background-position: -65px -35px;
opacity: .3;
filter: alpha(opacity=30)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Slider - Jssor Slider, Carousel, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function(containerId) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 2, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
<div u="loading" style="position:absolute;top:0px;left:0px;">
<div style="filter:alpha(opacity=70);opacity:0.7;position:absolute;display:block;background-color:#000000;top:0px;left:0px;width:100%;height:100%;">
</div>
<div style="position:absolute;display:block;background:url(../img/loading.gif) no-repeat center center;top:0px;left:0px;width:100%;height:100%;">
</div>
</div>
<div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">
<div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
<div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
<div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
</div>
<span u="arrowleft" class="jssora08l" style="top:8px;left:8px;">
</span>
<span u="arrowright" class="jssora08r" style="bottom:8px;left:8px;">
</span>
<a style="display:none" href="http://www.jssor.com">Image Slider</a>
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
</body>
</html>
The "simple slider" example from here on the jssor website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function(containerId) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 1 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
<div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">
<div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
<div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
<div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
</div>
<a style="display:none" href="http://www.jssor.com">Image Slider</a>
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
</body>
</html>
All editing was done with vim. I am probably missing something really simple, but I don't understand how it isn't working because I followed the guides to a T and then used example sources off of the website. I feel like I have eliminated anything that could be a source of error.
Please run vertical-slider.compress.bat, you will get vertical-slider.html.
Open it, the code between <body></body> is what you need.
In addition, with jssor slider maker you can generate code by one click, see export slider code.
Related
Good day to all. I am new and novice and its my first question to this forum. I would try my level best to maintain dignity of this community and forum.
I just started to learn web development with html, css and java script. I was trying to make a slide show of images with "div" and backgroup-images. after lots of effort it worked but not smooth.
Images not appears one by one serial but skip randomly. Speed of slides are not uniform and after few seconds it goes very fast.
I was using "setInterval" in my codes.
<!-- scroll.html -->
<!DOCTYPE html>
<html>
<<head>
<meta charset="UTF-8">
<meta name= "index.html" content="html self made web site ">
<meta name= "keywords" content="web design, affordable and professional">
<meta name="description" content="Affordable and smart web desing without any builders rather via self made codes">
<meta name="Author" content="Binod Binani">
<meta name="viewport" content="width=device-width,initial-scale=0">
<!--Css link -->
<!--<link rel="stylesheet" type="text/css" href="../HTML-WEB/sc-css/sc_style1.css">
<script type="text/javascript" src="../html-web/java-js/slides.js" ></script> -->
<title>#Sharp Compusoft scroll#</title>
<style>
#Myimg{
}
#divBox{
min-height: 425px;
border: 2px black solid;
float: right ;width: 48%;
background-image: url("../html-web/sharp-slides/05.bmp");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: auto;
}
#divSlides{
background-image: url("../HTML-WEB/img/it-slide01.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 425px;
border: 2px blue solid;float:
left; width: 50%;
}
</style>
</head>
<body onload="showImages()">
<section id='Middle' style="max-height: 430px;margin-top: 100px; border: 8px yellow solid; position: relative;">
<div id="divMiddle" style="min-height:425px; border: 5px red solid; margin: auto;">
<div id="divSlides" >
<!--50% left for fix image"> -->
</div>
<div id='divBox'>
<!--50% right for sliding image. Images are from 1 to 12 slides"> -->
<h4 id='head4'>1/12</h4>
</div>
</div>
</section>
<script>
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
showImages();
function showImages(){
var ImageSource=""
if (imageNo > 12) {
imageNo=1 ;
}
if (imageNo< 10){
ImageSource= filepath +"0" +imageNo + extension ;
} else{
ImageSource= filepath +imageNo + extension
}
head4.innerHTML = imageNo+'/12'
document.getElementById('divBox').style.backgroundImage = ImageSource;
imageNo++; //increment by 1 step
setTimeout(showImages,5000);
} // showImages
</script> -->
</body>
</html>
There a couple of things causing the issue you are describing
First, you are calling showImages() three times, all they are all running at the same time, causing the timeouts to overlap and the image to jump out of order.
You should remove this function call <body onload="showImages()">
And this one too setTimeout(showImages,5000);
Then use setInterval, instead of setTimeout, the difference is that the interval keeps running every given time, instead of running just once like the timeout.
Here change showImages(); to var slidesInteval = setInterval(showImages,5000);
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
var slidesInteval = setInterval(showImages,5000);
That way you function will be running only once every 5 seconds, you need to store the interval in a variable in case you want to clear it later.
You can check the full fiddle here https://jsfiddle.net/zgranda/5gnfr7hv/8/ . I used lorem picsum for the images, so don't copy the images urls
I have 2 web pages, gantt and securityTV. Gantt is complicated, but here's security tv:
<!DOCTYPE html>
<html>
<head>
<link href="http://ctadweb/B5Tours/Content/site.css" rel="stylesheet">
<meta http-equiv="refresh" content="300" />
</head>
<body>
<div style="width:100%; height:100%; display:table;">
<div style="display:table-cell; vertical-align:middle; text-align:center;">
<h1 style="color:green; font-size:60px;">RAYTHEON ACCESS</h1>
</div>
</div>
<footer class="site-footer" style="margin-top:-132px;">
<div>
<img src="http://ctadweb/B5Tours/Content/FooterPicture.jpg"/>
<div id="site-footer-image-background" style="margin-top:-4px;"></div>
</div>
</footer>
</body>
</html>
and the relevant part of site.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.site-footer, .page-wrap:after {
height: 128px;
}
.site-footer div{
width:100%;
text-align:center;
height:128px;
}
#site-footer-image-background{
width:100%;
z-index:-1;
background-color:#365f93;
height:67px;
top:-67px;
position:relative;
}
Now here's the weirdness. When I save that web page and open it with internet explorer, it runs fine. When I run my C# project which creates that web page, so we're looking at localhost:/securityTV, it runs fine. But when I publish the project and try to run off ctadweb, it doesn't cooperate. The Raytheon access text isn't vertically centered, it's aligned to the top of the screen.
additionally, in my gantt page, I rotate some headers sideways, but just like with vertical-align: middle; it only works when I'm testing it, when I open a saved version of the page, or when I use firefox. I tried opening internet explorer's options and disabling some addons, but all I have under "currently loaded addons" are 5 which are disabled, something called "research" which is not available, and "Java(tm) Plug-In 2 SSV Helper". I tried disabling them both, but I got the same problem. I've tried 2 computers pointing to ctadweb, both get the same (wrong) display.
Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</img>
</a>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
Here is a website that uses this method -
http://www.equisgarcia.com
There are multiple approaches to this issue, depending always on your needs.
I made a fiddle using only CSS with one of the approaches, you can see it working here.
All you you need is:
1) Define a parent element "parentExample" containing the image and the text with a size.
2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default.
3) Define a hover "parentExample:hover" in which image is hidden and text display.
.parentExample {
height: 400px;
width: 400px;
}
.imageExample {
height: 100%;
width: 100%;
}
.textExample {
height: 100%;
width: 100%;
display: none;
}
.parentExample:hover .imageExample {
display: hidden;
}
.parentExample:hover .textExample {
display: block;
}
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
This is how the first figure image on the site is done in HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="pr_contain_item_7129129">
<a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
"equisgarcia" onfocus="this.blur()" onmouseout=
"this.className='nohover';" onmouseover="this.className='hover';" rel=
"history"></a>
<div class="loader_holder" id="load_7129129"><img src=
"/_gfx/loadingAnim.gif"></div>
<div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
data-hi-res=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
height="169" src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
width="300"></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</div>
<div class="excerpt">
Fig.ω
</div>
<div class="thumb_tag">
<span class="text"><a href=
"http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
<a href=
"http://www.equisgarcia.com/filter/Print">Print</a> </span>
</div>
</div>
</body>
</html>
you can simply do this with javascript and html and also with css and as follows:
<html>
<style type="text/css">
#sam{
height: 100px;
width: 100px;
background-color:#ccc;
}
#sam:hover{
background-color: #eee;
}
</style>
<head>
<script type="text/javascript">
var change = function(){
var x = document.getElementById("sam");
x.innerHTML = "this is new";
}
var changeanother = function(){
var x = document.getElementById("sam");
x.innerHTML = " ";
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>
futrher using innerHTML helpes you to gave more controls over your tag.
you can also use img tage insted of a div tag.
as you wish
You an use sprites; in CSS using background-position-x, -y properties.
<div class="image"></div>
CSS:
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.
I Develop a marquee which continuously moves to upward direction.
But what the exact problem is after finishing scrolling last image there is a huge gap between first image and last image. I just want to remove the trailing space which additionally add to the bottom of the last image. Is anybody help me to figure out the solution. Thanks in advance.
HTML :
<div style="margin-left:760px;border:0px;height:300px; width:265px;">
<marquee bgcolor="transparent" scrollamount="8" direction="up" width="265px;" style="float:left; position:absolute;" loop="true" height="300px" onmouseover="this.stop()" onmouseout="this.start()">
<img src="http://s30.postimg.org/bab6pd5wd/i05.jpg" width="220" style="z-index:11;" />
<br>
<img src="http://s30.postimg.org/84qkz5na5/i06.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/nxvjfma71/i07.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/lf9uexogt/i08.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/g6eth261p/i09.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/wvg9cz2n1/i10.jpg" width="220" />
<br>
</marquee>
</div>
What i did is just here : http://jsfiddle.net/vivekbhintade/xuwN2/13/
Remove the last <br> from your marquee should do it, plus check your css and make sure that there is no margin added to images there.
As others have pointed out, using the <marquee> tag is really bad practice nowadays. There are lots of very nice jquery marquee plugins if you have a look around.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
overflow: hidden;
background-color: white;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var zxcMarquee={
init:function(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;
p.style.overflow='hidden';
obj.style.position='absolute';
obj.style[mde[0]]='0px';
obj.style[mde[3]]=sz+'px';
clone=obj.cloneNode(true);
clone.style[mde[0]]=sz+'px';
clone.style[mde[2]]='0px';
obj.appendChild(clone);
o=this['zxc'+id]={
obj:obj,
mde:mde[0],
sz:sz
}
if (typeof(srt)=='number'){
o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
}
else {
this.scroll(id,0)
}
},
scroll:function(id,ud){
var oop=this,o=this['zxc'+id],p;
if (o){
ud=typeof(ud)=='number'?ud:0;
clearTimeout(o.dly);
p=parseInt(o.obj.style[o.mde])+ud;
if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
p+=o.sz*(ud>0?-1:1);
}
o.obj.style[o.mde]=p+'px';
o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
}
}
}
function init(){
zxcMarquee.init({
ID:'marquee1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
zxcMarquee.init({
ID:'marquee2', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
}
if (window.addEventListener)
window.addEventListener("load", init, false)
else if (window.attachEvent)
window.attachEvent("onload", init)
else if (document.getElementById)
window.onload=init
</script></head>
<body>
<div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
sub category
to better organize its scripts.</p>
<p><b>Gradient Image Maker</b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b>DD Help Forum</b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
<div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
sub category
to better organize its scripts.</p>
<p><b>Gradient Image Maker</b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b>DD Help Forum</b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
</body>
</html>
I want to allow mobile site users to swipe/scroll through a list of icons.
The icons are div tags containing img tags.
The user should be able to swipe the container, scrolling/sliding the elements left or right.
The images need to slide smoothly with acceleration and deceleration.
Needs to work on iOS and Android.
We needed something like this sometime back, so I made a demo for it at that time. It's pretty basic, but it'll lay up all the ground work you need. First, lets start with the markup :
Markup
Since you mentioned jQM in the tag section of your question, Im gonna go with jQM [data-role=page] markup. You'd have a structure like this :
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Slideshow</h1>
</div>
<div data-role="content">
<div class="images">
<!--your images here -->
</div>
</div>
</div>
So you'd put all your images in the div with class=images. A particular group of images were encapsulated within a tags like this :
<a href="#">
<img src="25AC.jpg" />
</a>
<a href="#">
<img src="nature.jpg" />
</a>
<!--so on-->
You'd place this inside div.images. So that's about the markup we have.
CSS
The stylesheet part is simple.
.images {
height : 280px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color : #272722;
}
.images a{
padding : 14px 5px 0px 5px;
margin: 5px 3px 0px 3px;
vertical-align: middle;
display: inline-block;
}
images img {
max-width: 100%;
max-height:512px;
}
Important properties to note here :
The overflow-x, overflow-y properties : The former needs to be enabled and the latter needs to be disabled. Only then the scroll will happen when you swipe right or left.
The white-space property : This is important to make the images come in a straight horizontal layout.
The max-width property : This is for scaling the images on mobile.
That's it! You're done!
Extras
I just added a popup to show the image when its tapped so that I'd be able to demonstrate the event handling. Here's the popup :
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="b" data-corners="false">
Close
<div id="stuff"></div>
</div>
I'd be putting the image inside div#stuff when the a surrounding the img is clicked. Here's the JS :
//pageinit event of page
$(document).on("pageinit", "[data-role=page]", function() {
//cache popup for future use
var $popup = $("#popupInfo");
//click event for "a" tag inside .images
$(this).on("click", ".images > a[href=#]", function(e) {
//prevent default action
e.preventDefault();
//clone the image inside "a"
var $img = $(this).find("img").clone();
//add the cloned image inside #stuff
$popup.find("#stuff").html($img);
//open popup()
$popup.popup().popup("open");
});
});
Demo & Code
Demo & Code at jsbin.com
Alternatives
You could try out swipejs, which is jQuery plugin which will provide a much more sophisticated functionality. Here's the link to the site.