Passing custom field content to fancybox title/custom area - javascript

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 } ?>

Related

I am using Owl Carousel - Filter on projects as per category so i want to show the category description on every category button click

I have category table field and project table field in db i am fetching data or project as per category ID and showing them using php codedigniter in Owl Carousel - Filter Javascript.
below are the detail mention. include image view.
What actually i want i am trying to show the category detail under the projects on category button click
I assign the same class to the category button and the project by concatenating the category Id and projects category Id. So when we click on button the projects having same button class are appear perfectly but it not showing the category detail while click on specific category button click. for more information i am attaching my code as well. please have look. and help me. if you understand the problem.
my PHP Codeigniter Code is:
<div style="margin-bottom:10px; text-align: center;">
<div class="btn-filter-wrap">
<button class="btn-filter" data-filter="*">All</button>
<?php $categorydetail = ""; ?>
<?php if (!empty($categorydata)) { foreach ($categorydata as $category) {
$categoryclass = "category".($category['id']);
$categoryname = ($category['shortname']);
$categorydetail = ($category['detail']);
?>
<button class="btn-filter" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>
<?php }} ?>
</div>
<div class="project-slick categories">
<?php if (!empty($projectdata)) { foreach ($projectdata as $project) {
$projectclass = "category".($project['categoryid']);
$title = ($project['title']);
$detail = ($project['detail']);
$image = ($project['userfile']);
?>
<div class="item view view-eighth <?php echo $projectclass; ?>">
<img class="img-responsive" src="<?php echo base_url('fassets/images/projects/'. $image);?>" />
<div class="mask">
<h2><?= $title ?></h2>
<div><?php echo (strlen($project['detail'])>50)?(substr($project['detail'],0,200).'...'):$project['detail']; ?></div>
<a class="info ajax projects" href="<?php echo base_url("maincontroller/pdetail/".$project['id']);?>" >In Large</a>
</div>
</div>
<dir id="catdetail"><?= $categorydetail;?></dir>
<?php }} ?>
</div>
</div>
this is my javascript code is:
$(function() {
var owl = $('.categories').owlCarousel({
rel: 'gal',
width: "100%",
initialWidth: "0",
initialHeight: "0",
height:"100%",
// loop :false,
// margin :10,
// nav :false,
previous: "<i class='fa fa-chevron-left'></i>",
next: "<i class='fa fa-chevron-right'></i>",
close: "<i class='fa fa-times'></i>",
current: "",
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
})
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
var filter_data = $(this).data('filter');
/* return if current */
if($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
owl.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})

i solved this problem by creating javascript function
JS Func
function cat_detail(str) {
document.getElementById("cat_detail").innerHTML = str;
// alert(str);
}
After that i call event click on button and pass the string to the function.
<button class="btn-filter" onclick="cat_detail('<?= $categorydetail ?>')" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>
and create a div with ID "cat_detail" which display the detail. :)

slick setting active slide

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>

Open Lightbox on onload page

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 );

Javascript from PHP (wordpress)

I created a new WordPress theme. When I moved it into an IIS webserver it fails.
Here's my code:
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function()
{
var i = Math.round((Math.random()) * info.length);
if (i == info.length) --i;
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}
else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>
It is because of the JavaScript but I have some problem fixing this, I have first of all tried to echo the JavaScript, but I then got a problem with the first line of the script which is: var info = <?php echo json_encode($ContentArray) ?>;
When I ex. tried to
Echo 'var info = ' + echo json_encode($ContentArray) ?> + ";"
I just gets an http 500-error. Do any of you have an idea of what I can try to fix my problem

If you want to use the <Script> tag, you need to close the php tag, in here:
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
So it should look like that:
?>
<script>
[..]
</script>
<?php
The best practice it that you should place the JS either in at the top or bottom of your file or in another file.

The Problem is that you did not close the PHP Tags before entering the <Script> Block... In other words; you were still in PHP Mode when you wrote your Javascript as if you were writing it on a normal HTML Document. Sure you can output Javascript via PHP but then, you may have to build that up.
Here you go with something that might assist:::
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
?>
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function() {
var i = Math.round((Math.random()) * info.length);
if (i == info.length){ --i; }
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>

Dynamically load an image inside modal

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

Categories