Ask your WordPress questions! Pay money and get answers fast! (more info)

Change link to URL instead of lightbox image WordPress

  • SOLVED

Hi There,

I currently have a flow responsive slider to which I need the Lightbox popup removed to replace it with a URL to a page.

The website is http://bgc.wpdeployment.com

I have an array that calls the description from the theme I purchased below:

<?php
if(file_exists('../../../wp-load.php'))
{
require_once( '../../../wp-load.php' );
}
else
{
require_once( '../../../../wp-load.php' );
}


if(!isset($_GET['gallery_id']) OR empty($_GET['gallery_id']))
{
$pp_homepage_slideshow_cat = get_option('pp_homepage_slideshow_cat');
$homepage_items = -1;

$args = array(
'post_type' => 'attachment',
'numberposts' => $homepage_items,
'post_status' => null,
'post_parent' => $pp_homepage_slideshow_cat,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );
}
else
{
$portfolio_items = -1;

$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $_GET['gallery_id'],
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );
}


header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="utf-8" ?>
<bank>';

foreach($all_photo_arr as $photo)
{
$full_image_url = wp_get_attachment_image_src( $photo->ID, 'full' );
$small_image_url = wp_get_attachment_image_src( $photo->ID, 'large' );

echo '<img>';
echo '<src>'.$small_image_url[0].'</src>';
echo '<link>'.$full_image_url[0].'</link>';
echo '<title></title>';
echo '<caption></caption>';
echo '</img>';
}

echo '</bank>';
?>


I need to make sure the array calls _wpif2-image-link to load up the link I associate with the image and I need it to replace $full_image_url within the secondary for loop so that it loads the link to the page I have assigned it to in the media library.

Thanks!

Answers (1)

2013-05-26

Hariprasad Vijayan answers:

Hello,

Can you please tell me where the images appears in your site?


midsummas comments:

Hi There,

They appear on the home page in the flow slider: [[LINK href="http://bgc.wpdeployment.com/"]][[/LINK]]

Thanks,

Les


Hariprasad Vijayan comments:

Are you sure the code mention in your question is used to generate your slider? Please show complete code used in home page.


midsummas comments:

The 3 files that control the page are index.php, imageFlowXML.php & template-slider-flow.php.

<strong>index.php</strong>

<?php
/**
* The main template file.
*
* @package WordPress
*/

session_start();

if(isset($_SESSION['pp_homepage_slideshow_style']))
{
$pp_homepage_slideshow_style = $_SESSION['pp_homepage_slideshow_style'];
}
else
{
$pp_homepage_slideshow_style = get_option('pp_homepage_slideshow_style');
}
if(empty($pp_homepage_slideshow_style))
{
$pp_homepage_slideshow_style = 'flow';
}

if($pp_homepage_slideshow_style == 'youtube_video')
{
$_GET['mode'] = 'f';
}


get_header();

$pp_homepage_slideshow_cat = get_option('pp_homepage_slideshow_cat');
$homepage_items = -1;

$args = array(
'post_type' => 'attachment',
'numberposts' => $homepage_items,
'post_status' => null,
'post_parent' => $pp_homepage_slideshow_cat,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );


include (TEMPLATEPATH . "/templates/template-slider-".$pp_homepage_slideshow_style.".php");

if($pp_homepage_slideshow_style != 'fullscreen')
{
get_footer();
}
?>


<strong>imageFlowXML.php</strong>


<?php
if(file_exists('../../../wp-load.php'))
{
require_once( '../../../wp-load.php' );
}
else
{
require_once( '../../../../wp-load.php' );
}


if(!isset($_GET['gallery_id']) OR empty($_GET['gallery_id']))
{
$pp_homepage_slideshow_cat = get_option('pp_homepage_slideshow_cat');
$homepage_items = -1;

$args = array(
'post_type' => 'attachment',
'numberposts' => $homepage_items,
'post_status' => null,
'post_parent' => $pp_homepage_slideshow_cat,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );
}
else
{
$portfolio_items = -1;

$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $_GET['gallery_id'],
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );
}


header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="utf-8" ?>
<bank>';

foreach($all_photo_arr as $photo)
{
$full_image_url = wp_get_attachment_image_src( $photo->ID, 'full' );
$small_image_url = wp_get_attachment_image_src( $photo->ID, 'large' );

echo '<img>';
echo '<src>'.$small_image_url[0].'</src>';
echo '<link>'.$full_image_url[0].'</link>';
echo '<title></title>';
echo '<caption></caption>';
echo '</img>';
}

echo '</bank>';
?>


<strong>template-slider-flow.php</strong>


<div id="imageFlow">
<div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
</div>
<div class="scrollbar">
<?php
if(isset($_SESSION['pp_skin']))
{
$pp_skin = $_SESSION['pp_skin'];
}
else
{
$pp_skin = get_option('pp_skin');
}

if($pp_skin == 'light')
{
?>
<img class="track" src="<?php echo get_stylesheet_directory_uri(); ?>/images/white_slider_bg.png" alt="">
<img class="bar" src="<?php echo get_stylesheet_directory_uri(); ?>/images/white_slider_handle.png" alt="">
<?php
}
else
{
?>
<img class="track" src="<?php echo get_stylesheet_directory_uri(); ?>/images/dark_slider_bg.png" alt="">
<img class="bar" src="<?php echo get_stylesheet_directory_uri(); ?>/images/white_slider_handle.png" alt="">
<?php
}
?>
<img class="arrow-left" src="<?php echo get_stylesheet_directory_uri(); ?>/images/sl.gif" alt="">
<img class="arrow-right" src="<?php echo get_stylesheet_directory_uri(); ?>/images/sr.gif" alt="">
</div>
</div>

<div id="fancy_gallery" style="display:none">
<?php
$pp_display_image_title = get_option('pp_display_image_title');

foreach($all_photo_arr as $key => $photo)
{
$full_image_url = wp_get_attachment_image_src( $photo->ID, 'full' );
$small_image_url = wp_get_attachment_image_src( $photo->ID, 'large' );
?>
<a id="fancy_gallery<?php echo $key; ?>" href="<?php echo $full_image_url[0]; ?>" rel="gallery" <?php if(!empty($pp_display_image_title)) { ?> title="<?php echo $photo->post_title; ?>" <?php } ?>><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/white_slider_handle.png" /></a>
<?php
}
?>
</div>

<?php
if(!empty($all_photo_arr))
{
?>
<script>
/* ==== create imageFlow ==== */
// div ID, imagesbank, horizon, size, zoom, border, autoscroll_start, autoscroll_interval
imf.create("imageFlow", '<?php echo get_stylesheet_directory_uri(); ?>/imageFlowXML.php', 0.6, 0.4, 0, 10, 8, 4);

jQuery(document).ready(function(){
jQuery('#footer').css('position', 'fixed');
jQuery('#footer').css('bottom', '20px');
jQuery('#footer').css('width', '100%');
jQuery('#footer').css('textAlign', 'center');
});
</script>
<?php
}
?>


Hariprasad Vijayan comments:

Hello,

Try the following changes,

change click : function () { in http://bgc.wpdeployment.com/wp-content/themes/bgc/js/jquery.ppflip.js as follows


/* ==== diapo onclick ==== */
click : function () {
/* ---- stop autoscroll ---- */
this.parent.time = 0;
this.parent.time_out = this.parent.time_start;
if (this.parent.view == this.N) {
/* ---- click on zoomed diapo ---- */
if (this.url) {
/* ---- open hyperlink ---- */
//$j('#fancy_gallery'+this.N).trigger('click');
window.open(this.url, this.target);
} else {
/* ---- zoom in/out ---- */
/*this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();*/
}
} else {
/* ---- select diapo ---- */
this.parent.view = this.N;
this.parent.calc();
}
return false;
}

also customize <link> in your imageFlowXML.php with custom url.


<?php
if(file_exists('../../../wp-load.php'))
{
require_once( '../../../wp-load.php' );
}
else
{
require_once( '../../../../wp-load.php' );
}
if(!isset($_GET['gallery_id']) OR empty($_GET['gallery_id']))
{
$pp_homepage_slideshow_cat = get_option('pp_homepage_slideshow_cat');
$homepage_items = -1;
$args = array(
'post_type' => 'attachment',
'numberposts' => $homepage_items,
'post_status' => null,
'post_parent' => $pp_homepage_slideshow_cat,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );
}
else
{
$portfolio_items = -1;
$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $_GET['gallery_id'],
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );
}
header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="utf-8" ?>
<bank>';
foreach($all_photo_arr as $photo)
{
$full_image_url = wp_get_attachment_image_src( $photo->ID, 'full' );
$small_image_url = wp_get_attachment_image_src( $photo->ID, 'large' );
echo '<img>';
echo '<src>'.$small_image_url[0].'</src>';
echo '<link>'.YOUR CUSTOM PAGE URL.'</link>';
echo '<title></title>';
echo '<caption></caption>';
echo '</img>';
}
echo '</bank>';
?>


Good luck...


midsummas comments:

Hi Hariprasad,

Thanks for the fix to the javascript, that removes it out of the Lightbox popup, but how do I call the URL using the variable: _wpif2-image-link from the image itself?

I tried changing imageFlowXML.php to:


header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="utf-8" ?>
<bank>';

foreach($all_photo_arr as $photo)
{
$full_image_url = wp_get_attachment_image_src( $photo->ID, 'full' );
$small_image_url = wp_get_attachment_image_src( $photo->ID, 'large' );
$image_link = get_option('_wpif2-image-link');

echo '<img>';
echo '<src>'.$small_image_url[0].'</src>';
echo '<link>'.$image_link.'</link>';
echo '<title></title>';
echo '<caption></caption>';
echo '</img>';
}

echo '</bank>';
?>


But that does not work...

Thanks,

Les


Hariprasad Vijayan comments:

Hello Les,

If wou are using wordpress options for storing link, then you need to call
$image_link = get_option('_wpif2-image-link');
before the for loop. And also initialize an incrementer. Echo array value like
echo '<link>'.$image_link[$i].'</link>';
Actually don't have a system right now to demonstrate correctly. Am answering from my mobile device. Try it yourself.. Good luck..


midsummas comments:

Hi Hariprasad,

Ended up figuring it out. Thanks for the point in the right direction.

Cheers,

Les


foreach($all_photo_arr as $photo)
{
$small_image_url = wp_get_attachment_image_src( $photo->ID, 'large' );
$projects_url = apply_filters('project_url', $photo->project_url);

echo '<img>';
echo '<src>'.$small_image_url[0].'</src>';
echo '<link>'.$projects_url.'</link>';
echo '<title></title>';
echo '<caption></caption>';
echo '</img>';
}

echo '</bank>';


Hariprasad Vijayan comments:

Great... :-)