I would like to auto-open Lightbox when I open page.
This is a edited page to wordpress plug-in -> career portfolio. is it possible? Thanks
I have created a link from image in the page to iframe Lightbox to portfolio. Good solutions is to see gallery directly opened whiteout click.
Thank you for your time
<script>
(function($) {
jQuery('#gallery').crpTiledLayer({});
$( ".crp-light-gallery" ).each(function() {
var id = $( this ).attr("id");
$("#" + id).lightGallery({
mode: 'slide',
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',//
speed: 600,
addClass: '',
closable: true,
loop: true,
auto: false,
pause: 6000,
escKey: true,
controls: true,
hideControlOnEnd: false,
preload: 1, //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
showAfterLoad: true,
selector: null,
index: false,
lang: {
allPhotos: 'All photos'
},
counter: false,
exThumbImage: false,
thumbnail: true,
showThumbByDefault:false,
animateThumb: true,
currentPagerPosition: 'middle',
thumbWidth: 150,
thumbMargin: 10,
mobileSrc: false,
mobileSrcMaxWidth: 640,
swipeThreshold: 50,
enableTouch: true,
enableDrag: true,
vimeoColor: 'CCCCCC',
youtubePlayerParams: false, // See: https://developers.google.com/youtube/player_parameters,
videoAutoplay: true,
videoMaxWidth: '855px',
dynamic: false,
dynamicEl: [],
// Callbacks el = current plugin
onOpen : function(el) {}, // Executes immediately after the gallery is loaded.
onSlideBefore : function(el) {}, // Executes immediately before each transition.
onSlideAfter : function(el) {}, // Executes immediately after each transition.
onSlideNext : function(el) {}, // Executes immediately before each "Next" transition.
onSlidePrev : function(el) {}, // Executes immediately before each "Prev" transition.
onBeforeClose : function(el) {}, // Executes immediately before the start of the close process.
onCloseAfter : function(el) {}, // Executes immediately once lightGallery is closed.
onOpenExternal : function(el) {
var href = $(el).attr("data-url");
crp_loadHref(href,true);
}, // Executes immediately before each "open external" transition.
onToggleInfo : function(el) {
var $info = $(".lg-info");
if($info.css("opacity") == 1){
$info.fadeTo("slow",0);
}else{
$info.fadeTo("slow",1);
}
} // Executes immediately before each "toggle info" transition.
});
});
jQuery(".tile").on('click', function (event){
event.preventDefault();
if(jQuery(event.target).hasClass("fa") && !jQuery(event.target).hasClass("zoom")) return;
var tileId = jQuery(this).attr("id");
var target = jQuery("#" + tileId + " .crp-light-gallery li:first");
target.trigger( "click" );
});
})( jQuery );
<div class="crp-wrapper">
<div id="gallery">
<div id="ftg-items" class="ftg-items">
<?php foreach($crp_portfolio->projects as $crp_project): ?>
<div id="crp-tile-<?php echo $crp_project->id?>" class="tile">
<?php
$coverInfo = CRPHelper::decode2Str($crp_project->cover);
$coverInfo = CRPHelper::decode2Obj($coverInfo);
$meta = CRPHelper::getAttachementMeta($coverInfo->id, $crp_portfolio->options[CRPOption::kThumbnailQuality]);
?>
<a id="<?php echo $crp_project->id ?>" class="tile-inner">
<img class="crp-item" src="<?php echo $meta['src'] ?>" data-width="<?php echo $meta['width']; ?>" data-height="<?php echo $meta['height']; ?>" />
<div class="caption"></div>
</a>
<ul id="crp-light-gallery-<?php echo $crp_project->id; ?>" class="crp-light-gallery" style="display: none;" data-sub-html="<?php echo crp_infoBox( $crp_project)?>" data-url="<?php echo isset($crp_project->url) ? $crp_project->url : ''; ?>">
<?php
$meta = CRPHelper::getAttachementMeta($coverInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($coverInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>" >
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php foreach($crp_project->pics as $pic): ?>
<?php if(!empty($pic)): ?>
<?php
$picInfo = CRPHelper::decode2Str($pic);
$picInfo = CRPHelper::decode2Obj($picInfo);
$meta = CRPHelper::getAttachementMeta($picInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($picInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>">
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
</div>
I heve solved with this code in the end of js:
window.setTimeout('clickit()',20);
function clickit(){ document.getElementById("<?php echo $crp_project->id ?>").click();
}
<div onload="script();" class="crp-wrapper">
<div id="gallery">
<div id="ftg-items" class="ftg-items">
<?php foreach($crp_portfolio->projects as $crp_project): ?>
<div id="crp-tile-<?php echo $crp_project->id?>" class="tile">
<?php
$coverInfo = CRPHelper::decode2Str($crp_project->cover);
$coverInfo = CRPHelper::decode2Obj($coverInfo);
$meta = CRPHelper::getAttachementMeta($coverInfo->id, $crp_portfolio->options[CRPOption::kThumbnailQuality]);
?>
<a id="<?php echo $crp_project->id ?>" class="tile-inner">
<img class="crp-item" src="<?php echo $meta['src'] ?>" data-width="<?php echo $meta['width']; ?>" data-height="<?php echo $meta['height']; ?>" />
<div class="caption"></div>
</a>
<ul id="crp-light-gallery-<?php echo $crp_project->id; ?>" class="crp-light-gallery" style="display: none;" data-sub-html="<?php echo crp_infoBox( $crp_project)?>" data-url="<?php echo isset($crp_project->url) ? $crp_project->url : ''; ?>">
<?php
$meta = CRPHelper::getAttachementMeta($coverInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($coverInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>" >
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php foreach($crp_project->pics as $pic): ?>
<?php if(!empty($pic)): ?>
<?php
$picInfo = CRPHelper::decode2Str($pic);
$picInfo = CRPHelper::decode2Obj($picInfo);
$meta = CRPHelper::getAttachementMeta($picInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($picInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>">
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
</div>
JavaScript:
<script>
function script()
{
jQuery('#gallery').crpTiledLayer({});
$( ".crp-light-gallery" ).each(function() {
var id = $( this ).attr("id");
$("#" + id).lightGallery({
mode: 'slide',
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',//
speed: 600,
addClass: '',
closable: true,
loop: true,
auto: false,
pause: 6000,
escKey: true,
controls: true,
hideControlOnEnd: false,
preload: 1, //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
showAfterLoad: true,
selector: null,
index: false,
lang: {
allPhotos: 'All photos'
},
counter: false,
exThumbImage: false,
thumbnail: true,
showThumbByDefault:false,
animateThumb: true,
currentPagerPosition: 'middle',
thumbWidth: 150,
thumbMargin: 10,
mobileSrc: false,
mobileSrcMaxWidth: 640,
swipeThreshold: 50,
enableTouch: true,
enableDrag: true,
vimeoColor: 'CCCCCC',
youtubePlayerParams: false, // See: https://developers.google.com/youtube/player_parameters,
videoAutoplay: true,
videoMaxWidth: '855px',
dynamic: false,
dynamicEl: [],
// Callbacks el = current plugin
onOpen : function(el) {}, // Executes immediately after the gallery is loaded.
onSlideBefore : function(el) {}, // Executes immediately before each transition.
onSlideAfter : function(el) {}, // Executes immediately after each transition.
onSlideNext : function(el) {}, // Executes immediately before each "Next" transition.
onSlidePrev : function(el) {}, // Executes immediately before each "Prev" transition.
onBeforeClose : function(el) {}, // Executes immediately before the start of the close process.
onCloseAfter : function(el) {}, // Executes immediately once lightGallery is closed.
onOpenExternal : function(el) {
var href = $(el).attr("data-url");
crp_loadHref(href,true);
}, // Executes immediately before each "open external" transition.
onToggleInfo : function(el) {
var $info = $(".lg-info");
if($info.css("opacity") == 1){
$info.fadeTo("slow",0);
}else{
$info.fadeTo("slow",1);
}
} // Executes immediately before each "toggle info" transition.
});
});
jQuery(".tile").on('click', function (event){
event.preventDefault();
if(jQuery(event.target).hasClass("fa") && !jQuery(event.target).hasClass("zoom")) return;
var tileId = jQuery(this).attr("id");
var target = jQuery("#" + tileId + " .crp-light-gallery li:first");
target.trigger( "click" );
};
})( jQuery );
Related
I've been using the swiper.js javascript library to create a slider with vertical thumbnails, where if you click the thumbnail, the main image will "slide" to that image.
The functionality works perfectly when I manually click on a thumbnail, however, I need to change the main image when the user selects the color swatches as well. I've called the javascript function click() on the thumbnail element, I've tried calling click() on both the img itself and the div containing the img. Unfortunately I'm not seeing the same functionality, my click event does register, and I am able to console log/change the border of the thumbnail, but it doesn't run the swiper.js function "onThumbClick":
There is a function in swiper.js called "onThumbClick" which I've done a console log in, and I've noticed that it is not being called when I use javascript click() but it is being called when I click it manually.
I'm definitely no javascript pro so I'm not exactly sure what's happening here.
EDIT - adding some code snippets
HTML
<div class="wrapper">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<?php foreach ($gallery as $image): ?>
<?php if ($this->isGalleryImageVisible($image) and (strpos($image->getLabel(), 'swatch')) === false) : ?>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $image->getFile())->resize($imgWidth, $imgHeight); ?>" data-zoom-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $image->getFile()); ?>"/>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php if (count($gallery) > 0): ?>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<?php foreach ($gallery as $image): ?>
<?php
$url = $image->getUrl();
$endUrl = strrpos($url, '/');
$sku = $endUrl === false ? $url : substr($url, $endUrl + 1);
?>
<?php if ($this->isGalleryImageVisible($image) and (strpos($image->getLabel(), 'swatch')) === false) : ?>
<div class="swiper-slide thumbnails" data-sku="<?php echo $sku?>">
<img src="<?php echo $image->getUrl() ?>" data-sku="<?php echo $sku?>"/>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
Javascript (Init Slider)
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
direction: 'vertical',
spaceBetween: 10,
slidesPerView: 6,
freeMode: true,
watchSlidesVisibility: false,
watchSlidesProgress: false,
speed: 0,
});
var galleryTop = new Swiper('.gallery-top', {
zoom: {
maxRatio: 5,
},
spaceBetween: 10,
direction: 'horizontal',
thumbs: {
swiper: galleryThumbs
},
//preventing zoom containers from appearing over inactive swiper images
on:{slideChange: function() {
jQuery('.zoomContainer').remove();
}}
});
jQuery('.swiper-zoom-container').children('img').mouseover(function(){
jQuery(this).elevateZoom();
});
</script>
Calling click on my thumbnail:
jQuery(".thumbnails[data-sku='" + sku + "']").click(function(e) {
console.log('click');
console.log(jQuery(".thumbnails[data-sku='" + sku + "']"));
jQuery(".thumbnails[data-sku='" + sku + "']").css('border', '1px solid black');
});
jQuery(".thumbnails[data-sku='" + sku + "']").click();
Here is solution for this
Here is my code
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints: {
0: {
slidesPerView: 3,
},
992: {
slidesPerView: 4,
},
}
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
},
});
Whenever you select swatch from dropdown
$('select[name=p_option]').on('change',function(){
var indexToMove = $('option:selected', this).attr('data-val');
galleryTop.slideTo(indexToMove,1000,false);
});`
Here is html in my case there are shades in dropdown
<select class="form-control" name="p_option">
<option>Select Shade</option>
<option data-val="0" value="0">0</option>
<option data-val="1" value="1">1</option>
<option data-val="2" value="2">2</option>
<option data-val="3" value="3">3</option>
</select>
NOTE: Just display images in thumbs in same sequence as in select Dropdown because swiper slideTo function slides images using INDEX
I have a problem. I bring out a slick slider with navigation in tabs on one page, I have a lot of them there. When I bring out one slider, there are no problems. But when 2 or more, all the sliders are broken. I think this is a problem because I have only 1 slider in the js file, and a lot of sliders are displayed on the page via php, and the browser thinks it's the same slider. How can I make it so that each of the sliders becomes unique and in js there was a check for the slider. I output php from Wordpress plugin Advanced custom fields. Help me please in this question.
My JS slick parameters:
jQuery(document).ready(function(){
//Product slider with thumbs
jQuery('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
autoplay: true,
autoplaySpeed: 7000,
fade: true,
asNavFor: '.slider-nav'
});
jQuery('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
vertical: true,
verticalSwiping: true,
centerPadding: 150,
appendArrows: jQuery(".slider-nav"),
prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",
focusOnSelect: true,
responsive: [
{
breakpoint: 901,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
vertical: false,
centerMode: true,
centerPadding: 150,
verticalSwiping: false,
dots: false,
swipe: true
}
}]
});
});
My PHP output:
<?php elseif( get_row_layout() == 'type_silder' ): ?>
<?php $product_gallery = get_sub_field('type_slider_gallery');
if( $product_gallery ): ?>
<div class="product-slider-container">
<div class="slider-for">
<?php foreach( $product_gallery as $product_slider ): ?>
<a href="<?php echo get_post_meta( $product_slider['id'], 'link_page_img', true )?>">
<div class="fullsize-img">
<img src="<?php echo $product_slider['sizes']['large']; ?>" alt="<?php echo $product_slider['alt']; ?>"/>
<div class="subtitle-product">
<h3><?php echo $product_slider['title']; ?></h3>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
<div class="slider-nav">
<?php foreach( $product_gallery as $product_slider ): ?>
<div class="thumb-img">
<img src="<?php echo $product_slider['sizes']['thumbnail']; ?>" alt="<?php echo $product_slider['alt']; ?>"/>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?><!-- product gallery endif -->
<?php endif; ?>
I have implemented slick (http://kenwheeler.github.io/slick/) and everything is fine except the first slide is the first image shown rather than the one clicked on from the list of images, say image 5, image 1 would be displayed. I am using PHP to try and automate the process.
The col-sm-4 while loop displays all the images on the page, then when clicked a modal with the slick will popup and display the images inside the modal. As I said this process works fine, except the position of the image that is clicked. For eg, I click image 6 from the col-sm-4 list of images, but image 1 is displayed.
I would appreciate any assistance from the community. Thanks
**UPdate .. add a data/var and counter menuid to each div, I am just not sure how to access it in the Slick JS initialSlide option shown below: **
<div class="row">
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery);
while ($row = mysqli_fetch_array($value))
{ ?>
<div class='col-sm-4'>
<a title='<?php echo($row[0]); ?> href='#'>
<img class='thumbnail img-responsive images' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
<p class='images text-center'><?php echo($row[0]); ?></p>
<p id="demo"></p>
</a>
</div>
<?php } ?>
<div class='modal' id='modal-gallery' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' type='button' data-dismiss='modal'>×</button>
<h3 class='modal-title text-center'></h3>
</div>
<div class='modal-body'>
<div id='modal-carousel' class='text-center'>
<div class='your-content'>
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery); $counter = 0;
while ($row = mysqli_fetch_array($value))
{ ?>
<div id="menulist" data-menuid="<?php echo $counter++; ?>">
<h1>'<?php echo($row[0]); ?>'</h1>
<img class='modal-thumbnail' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
</div>
<?php } ?>
</div>
</div>
<div class='modal-footer'>
<button class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/slick/slick/slick.js"></script>
<script>
$('.thumbnail').click(function(){
$("#modal-gallery").modal("show");//.modal('show')/.modal('hide');
});
var menulist = $("#menulist");
var menuid = menulist.data("menuid");
$( "#menulist" ).click(function() {
var myId = $( "#menulist" ).data("menuid");
$( "#menulist" ).attr("menuid", myId);
});
$(document).ready(function(){
$('.your-content').slick({
/* lazyLoad: 'ondemand', */
/* centerMode: true, */
dots: true,
/* infinite: true, */
speed: 500,
fade: true,
adaptiveHeight: true,
focusOnSelect: true,
cssEase: 'linear',
/* initialSlide: 1, */
setPosition: 1,
/* slickGoTo: 8, */
initialSlide: menuid
});
});
</script>
My goal is to use ACF plugin to pass custom content to fancybox title area.
I load fancybox when there is images to display.
Currently i have this code to start with. How can i use ACF fields with fancybox so that every image gets its own custom field content?
For example output a link inside customHTML and a custom title using $color_desc .
Thanks!
<?php if (get_field('c_i')) { ?>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.js"></script>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.pack.js"></script>
<link href="<?php echo THEME_BASEURL?>/js/jquery.fancybox.css" rel="stylesheet">
<script type="text/javascript">
$(".fancybox").fancybox({
openEffect: "fade",
nextEffect: "fade",
prevEffect: "fade",
padding: 0,
helpers: {
title: {
type: 'inside'
}
},
beforeShow: function () {
var customContent = "<div class='customHTML'>My custom content</div>";
this.title = this.title ? this.title + customContent : customContent;
},
afterShow: function () {
$(".fancybox-outer").after($(".fancybox-title"));
}
});
</script>
<div class="color_img">
<ul>
<?php
if( have_rows('c_i') ):
while ( have_rows('c_i') ) : the_row();
$image = get_sub_field('c_if');
$color_desc = get_sub_field('c_d');
$image_url = $image['sizes']['colors'];
$image_url_larger = $image['sizes']['large'];
?>
<li>
<a class="fancybox" rel="gallery01" href="<?php echo $image_url_larger; ?>"><img src="<?php echo $image_url; ?>"></a>
<div><?php echo $color_desc; ?></div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>
</div>
<?php } ?>
Below is my code. I am attempting to load a picture in a modal. The picture exists on the page and I am able to get the source. Is there a way to simply load the image into a modal on click as I am trying to do here? I am able to click on an image and ALERT out the source; but when I try to plug the source into the function; nothing happens.
I am using ZEND but I do not believe that is relevant to the situation at hand and so I did not tag the question with the ZEND tag.
Can anyone explain what I need to do in order to load my image in a MODAL on click?
<?php
$this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css'));
$this->jQuery()->onLoadCapturestart();
?>
<!-- Modal Done Here -->
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
alert(pic1);
$(pic1).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
<?php $this->jQuery()->onLoadCaptureEnd(); ?>
<div id="designGroup">
<div id="title">
<?php echo strtoupper($this->object->GetType()); ?>
</div>
<div id="boxText">
<?php echo $this->object->GetDescription(); ?>
</div>
<?php $links = $this->object->GetLinks(); ?>
<div id="pictureBox">
<ul id="grid">
<li>
<a href="#">
<img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
This is how to build a variable that holds my IMG.
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
The below is the now fixed and complete JSCRIPT -
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
$(catIMG).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
I was able to find this information here https://stackoverflow.com/a/10788966/1583066