Rectangle 27 2

I use callback function for search the element that contain the big image and add a new element linked to image (only works in HTML5):

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
        <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>     
    </head>
    <body>
        <div id="main">
            <a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>
            <a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>
        </div>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                //Add callback function to prettyPhoto, called everytime an item is shown/changed
                $("a[rel^='prettyPhoto']").prettyPhoto({
                    changepicturecallback: function(){add_download()}
                });
            });

            function add_download(){
                //If "download" class doesn't exist
                if (!$(".download")[0]){
                    //Search for the div that contains the image and add an element with Text (or image)
                    $("#pp_full_res").append('<p class="download" style="cursor: pointer;position: absolute;right: 65px;z-index: 9999;">DOWNLOAD</p>');

                    $('.download').each(function(){
                        //Add "download" attribute that only works with HTML5
                        $(this).wrap('<a target="_blank" href="' + $(this).prev().attr('src') + '" download />');
                    });
                }

            }
        </script>
    </body>
</html>
$(this).wrap('<a target="_blank" href="' + $(this).prev().attr('src') + '" download />');
$(this).wrap('<a href="download.php?file=' + $(this).prev().attr('src') + '" />');

But image open in new tab. and does not work as downloading or save as option does not appeare. can you help me?

yii - How to add a link in Jquery PrettyPhoto to download the image - ...

jquery yii prettyphoto
Rectangle 27 1

OK, I solved my problem, here is an example that I found. They have added the link to download the photo like this:

<ul class='gallery clearfix'>
  <li>
     <a href='./uploads/1f.jpg' rel='prettyPhoto[gallery1]' title='Nature Photo One' >
       <img src='./uploads/1t.jpg' border='0' alt='' link='<a href="download.php?f=1f.jpg" class="url">Download This Photo</a>' />
     </a>
  </li>
  // REST OF THE IMAGES

</ul>

 <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({theme: 'light_rounded'});
    });
 </script>

There is a need to make some changes to the jquery.prettyphoto.js file. I used v 3.1.2 which can be downloaded here

This is the changes I made using the example that I mentioned before

(function($) {
$.prettyPhoto = {version: '3.1.4'};
    $.fn.prettyPhoto = function(pp_settings) {
    pp_settings = jQuery.extend({
              //....
              social_tools: '<div class="pp_social"><span class="pp_link"></span></div>'
              // I deleted the rest in social_tools since I wasn't going to use them, you can just add this to the begining of it.
           }, pp_settings);
    //....

    /*
* Initialize prettyPhoto.
*/
$.prettyPhoto.initialize = function() {
       //...
       pp_links=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr('rel').indexOf(theRel)!=-1)return($(n).find('img').attr('link'))?$(n).find('img').attr('link'):"";}):$.makeArray($(this).find('img').attr('link'));
  //...
    }

    //...
    $.prettyPhoto.open = function(event) {
       //....
       if(pp_links[set_position]!=""){$pp_pic_holder.find('.pp_link').show().html(unescape(pp_links[set_position]));}else{$pp_pic_holder.find('.pp_link').hide();}
       //....
    }

And if you want to use it with the prettyphoto extention in yii. You can replace the javaScript file with the file that you modified. Then:

<?php 
    $this->beginWidget('ext.prettyPhoto.PrettyPhoto', array(
        'id'=>'pretty_photo',
        // prettyPhoto options
        'options'=>array(
            'opacity'=>0.60,
            'modal'=>true,
            'theme'=> 'light_rounded'
        ),
    ));
?>
<div class="column4-front image-gallery">

        <a href="/files/immagini/<?php echo $data->image; ?>" rel="prettyPhoto[pp_gal]" title="<?php echo $data->caption; ?>">
             <img src="/files/immagini/thumb/<?php echo $data->image; ?>" link='<a href="<?php echo $this->createUrl('compania/downloadimage',array('f'=>$data->image)); ?>" class="url">Scarica questo foto</a>'/>

         </a>

   </div>
   <?php $this->endWidget('widgets.prettyPhoto');?>
public function actionDownloadImage()
    {
        $filename = $_GET['f']; 
        $fileDir='path to image';
        Yii::app()->request->sendFile(
            $filename,
            file_get_contents($fileDir.$filename)
        );      
    }

yii - How to add a link in Jquery PrettyPhoto to download the image - ...

jquery yii prettyphoto
Rectangle 27 1

<a id="photo_link" href="http://link_to_image_or_video" rel="prettyPhoto" title="">
    <img src="images/play-video.png" alt="" title="" width="380" height="147" />
</a>

JS (inside the document ready)

//do not show title on download link hover (download button)
$("#photo_link").hover(function(e){

    $(this).attr('data-title', $(this).attr('title'));
    $(this).removeAttr('title');

},
function(e){

    $(this).attr('title', $(this).attr('data-title'));

}); 

//add download link on the fly on click of photo link
$("#photo_link").on('click', function(){
    $(this).attr('title', '<div class="center"><a href="#download_link" class="btn btn-primary btn-lg"><strong>Download</strong></a></div>');
});

No PrettyPhoto JS changes are necessary. Here is the simple idea. Yours to play inside Yii framework.

Even easier: Only JS (include JS in your view)

$("a[rel^='prettyPhoto']").prettyPhoto({
    social_tools: '<div class="center"><a id="get_started" href="#contact" class="btn btn-primary btn-lg"><strong>Download</strong></a></div>',
    default_width: 800,
    default_height: 450
});

yii - How to add a link in Jquery PrettyPhoto to download the image - ...

jquery yii prettyphoto
Rectangle 27 1

well this is a lot late i guess but it'll help someone,

first of all start using the latest version and have jquery 1.4+ atleast cause not 2.0 is ready and we all better start moving lol.

ok i'll take the above example

<a href='./uploads/1f.jpg' rel='prettyPhoto[gallery1]' title='Nature Photo One' >
       <img src='./uploads/1t.jpg' border='0' alt='' link='<a href="download.php?f=1f.jpg" class="url">Download This Photo</a>' />
     </a>

dont do the link="ur link" but instead use the data attribute like so

social_tools: '<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>' /* html or false to disable */

it'll be with all the markup in the starting.

now edit it to as below

social_tools: '<div class="{my_class}"><a href="{my_url}">{my_link}</a></div><br/><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>' /* html or false to disable */
// Rebuild Facebook Like Button with updated href
            if(settings.social_tools){
                facebook_like_link = settings.social_tools.replace('{location_href}', encodeURIComponent(location.href)); 
                $pp_pic_holder.find('.pp_social').html(facebook_like_link);
            }

replace with

if(settings.social_tools){
                facebook_like_link = settings.social_tools.replace('{location_href}', encodeURIComponent(location.href)); 
                $pp_pic_holder.find('.pp_social').html(facebook_like_link);
 settings.social_tools.replace('{my_url}',encodeURIComponent($("img[src='"+pp_images[set_position]+"']").data('link')));

// CUSTOMIZE BELOW TO YOUR NEED

settings.social_tools.replace('{my_class}','your_class');
settings.social_tools.replace('{my_link}','Go To Page');
                }

as said above in 2 lines u can replace '.your_class' with whatever name u want and so goes to 'Go To Page'

and all done Refresh ur page ie F5 cause this is changed in file.....and loaded and it'll work good.

yii - How to add a link in Jquery PrettyPhoto to download the image - ...

jquery yii prettyphoto
Rectangle 27 0

You can use a public variable to control this like

<?php
     class AbcController extends Controller
      {
          public $i = 1;

          public function actionGetajaxlinks(){
               $string = CHtml::ajaxLink('Another Link', array('getlistitems'),array('update'=>'#items_'.$this->i),array('class'=>'btn btn-link')); 
           $this->i ++;
           echo $string;

          }
      }

?>

Hi Neeraj, Thanks for your answer. I don't believe this solves the problem though. It will just update a different element.

javascript - Use AJAX to add an ajax link to the page - Yii - Stack Ov...

javascript php jquery ajax yii
Rectangle 27 0

It will be quite long so i didnt post in comentary. To achieve what you want, you don't actually need button. You can make it as link, or even some container, just apply styling. So start with code:

<?php echo $form->checkBoxRow($model, 'default'); ?>
<div class="form-actions">
    //some div or link here - doesnt matter, lets call it #sub_button
</div>

Now add js to your div(link), in html or bind click on document ready.

<div id="sub_button" onclick=getModal()>
<?php
if ($model->isNewRecord) echo 'Create' ;
else echo 'Save'
?>
</div>
function getModal(){
    if (($('#default').prop("checked")){
    //show here your dialog or modal window
    //if you need to pass some data or render it - use ajax 
    //$().dialog() if its simple jui 
    }
    else {}//show some notification or what you want here 
}

And 1 more - dont mix js with php. You cant use php in js, for this purposes exists ajax. Only thing you can do - echo php value to js variable. Also you cant pass js variables to php, only via ajax.

sir? the link create is not working?

php - Popup a window if checkbox is checked in Yii - Stack Overflow

php javascript jquery checkbox yii
Rectangle 27 0

Lone link is considered a poor answer (see faq) since it is meaningless by itself and target resource is not guaranteed to be alive in the future. It would be preferable to include the essential parts of the answer here, and provide the link for reference.

php - Yii ajaxSubmitButton() with fields validation - Stack Overflow

php jquery ajax yii
Rectangle 27 0

$this->menu=array(
    array(
      'label'=>'List Store',
      'url'=>array('index')
      'htmlOptions' => array(
            'onclick' => "{addStore();$('#dialogStore').dialog('open')}",
       ),
   ),

php - Yii linking breadcrumbs array links to javascript functions - St...

javascript php jquery yii
Rectangle 27 0

You should create a Widget.

Note: I copied below from another post. It works like charm.

First Create a new widget. Let say the name is CategoryWidget. Put this widget under components directory protected/components.

class CategoryWidget extends CWidget {

    public function run() {
        $models = Category::model()->findAll();

        $this->render('category', array(
            'models'=>$models   
        ));
    }
}

Then create a view for this widget. The file name is category.php. Put it under protected/components/views category.php

<?php if($models != null): ?>
<ul>
    <?php foreach($models as $model): ?>
    <li><?php echo $model->name; ?></li>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

Then call this widget from your main layout. main.php // your code ...

<?php $this->widget('CategoryWidget') ?>

jquery - how to pass a php variabe to yiibooster modal window via link...

php jquery twitter-bootstrap yii yii-booster
Rectangle 27 0

OK, I solved my problem, here is an example that I found. They have added the link to download the photo like this:

<ul class='gallery clearfix'>
  <li>
     <a href='./uploads/1f.jpg' rel='prettyPhoto[gallery1]' title='Nature Photo One' >
       <img src='./uploads/1t.jpg' border='0' alt='' link='<a href="download.php?f=1f.jpg" class="url">Download This Photo</a>' />
     </a>
  </li>
  // REST OF THE IMAGES

</ul>

 <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({theme: 'light_rounded'});
    });
 </script>

There is a need to make some changes to the jquery.prettyphoto.js file. I used v 3.1.2 which can be downloaded here

This is the changes I made using the example that I mentioned before

(function($) {
$.prettyPhoto = {version: '3.1.4'};
    $.fn.prettyPhoto = function(pp_settings) {
    pp_settings = jQuery.extend({
              //....
              social_tools: '<div class="pp_social"><span class="pp_link"></span></div>'
              // I deleted the rest in social_tools since I wasn't going to use them, you can just add this to the begining of it.
           }, pp_settings);
    //....

    /*
* Initialize prettyPhoto.
*/
$.prettyPhoto.initialize = function() {
       //...
       pp_links=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr('rel').indexOf(theRel)!=-1)return($(n).find('img').attr('link'))?$(n).find('img').attr('link'):"";}):$.makeArray($(this).find('img').attr('link'));
  //...
    }

    //...
    $.prettyPhoto.open = function(event) {
       //....
       if(pp_links[set_position]!=""){$pp_pic_holder.find('.pp_link').show().html(unescape(pp_links[set_position]));}else{$pp_pic_holder.find('.pp_link').hide();}
       //....
    }

And if you want to use it with the prettyphoto extention in yii. You can replace the javaScript file with the file that you modified. Then:

<?php 
    $this->beginWidget('ext.prettyPhoto.PrettyPhoto', array(
        'id'=>'pretty_photo',
        // prettyPhoto options
        'options'=>array(
            'opacity'=>0.60,
            'modal'=>true,
            'theme'=> 'light_rounded'
        ),
    ));
?>
<div class="column4-front image-gallery">

        <a href="/files/immagini/<?php echo $data->image; ?>" rel="prettyPhoto[pp_gal]" title="<?php echo $data->caption; ?>">
             <img src="/files/immagini/thumb/<?php echo $data->image; ?>" link='<a href="<?php echo $this->createUrl('compania/downloadimage',array('f'=>$data->image)); ?>" class="url">Scarica questo foto</a>'/>

         </a>

   </div>
   <?php $this->endWidget('widgets.prettyPhoto');?>
public function actionDownloadImage()
    {
        $filename = $_GET['f']; 
        $fileDir='path to image';
        Yii::app()->request->sendFile(
            $filename,
            file_get_contents($fileDir.$filename)
        );      
    }

yii - How to add a link in Jquery PrettyPhoto to download the image - ...

jquery yii prettyphoto
Rectangle 27 0

You may need to elaborate more / post code fragments so that we can have a better idea about your problem. But from what you explain here, I assume that you want whatever processing your Ajax request to know which link originated it. Assuming the asynchronous processing is done somewhere else (outside your browser), it wouldn't have access to your DOM. Therefore, you need to embed the id as an argument in your ajax request. In other words, pass the id of element sending the request as part of the request.

I need to get the id of the link before the ajax request is send to the server. I have added the code.

php - Get the id of the ajaxLink button before submission - Stack Over...

php ajax jquery yii
Rectangle 27 0

CHtml::ajaxLink renders a element, which doesnt have url attribute. You need such code:

if (data.status == "success"){ 
    jQuery(this).attr('href', '/core/bookmark/delete');
}

Besides, what I'm wanting to do is change the URL in the Ajax function which fires when the link is clicked, not on the link itself.

In that case, better solution is to draw two CHtml::ajaxLink elements and toggle the visibility of them according to ajax-requests result. It will cost you less effort.

I don't think that's correct in this case... If I look at my DOM on the page load: href="#" ... Using your line does not change the href attribute on success (but I am sure it's firing). Besides, what I'm wanting to do is change the URL in the Ajax function which fires when the link is clicked, not on the link itself.

php - Dynamically change the URL of Yii ajaxLink on success - Stack Ov...

php jquery ajax yii
Rectangle 27 0

You need to include both jquery and the library you're using, (I'm assuming it's this one?).

<script src="jquery.js"></script>
<script src="jquery.popupwindow.js"></script>
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/path/to/your/js/files/jquery.popupwindow.js'); ?>

php - jquery open popup window when click on link - Stack Overflow

php jquery yii popup
Rectangle 27 0

assign to your ajax link a random ID.

in your ajaxLink html options put:

Wow! Thanks. I kept putting them in the wrong places (inside the createUrl()). Thanks man!

php - Yii - CHtml::ajaxLink inside a div loaded with an CHtml::ajaxLin...

php jquery ajax yii
Rectangle 27 0

'update'=>'#'.CHtml::activeId($model,'background_text')

Also, using success instead of update will be a better idea.

Thanks Dhiraj but sorry to say, it is not working ...

Actually it works, but it do not display results in tinymce editor...

php - How to Populate data in tinymce editor from Ajax in yii - Stack ...

php jquery ajax yii tinymce
Rectangle 27 0

Did you check the html output on the id for the select? You may need to use #adj instead of #adjudicator in the jQuery function.

array('onchange'=>'update_function(this);')

php - Chtml::link with JQuery - Stack Overflow

php jquery yii
Rectangle 27 0

I think you should use CHtml::activeId and CHtml::activeName as it fits Yii much better. So your code would look like:

$this->widget('zii.widgets.jui.CJuiAutoComplete', [
   'name'=>CHtml::activeName($model, 'postcode'),
   'id'=>CHtml::activeId($model, 'postcode'),
   //..........
]);
CJuiAutoComplete
model
attribute
$this->widget('zii.widgets.jui.CJuiAutoComplete', [
   'model'=>$model,
   'attribute'=>'postcode',
   //..........
]);

get model name in yii for jquery - Stack Overflow

yii
Rectangle 27 0

<?php echo CHtml::dropDownList("sourceModels", '',array(),array('class'=>'mandal','size'=>20,'id'=>'sorceModels') );?>

it seems like you doesn't specify the dropdown id,so the js can't find the Dom correct.

Thanks for your response . That was problem and I corrected it . But still it is not finding the .html file

Ya it is looking for that file under /final/dist_list.html . Since I copied it to components/js it is not finding it .

Actually I believe the "sourceModels" id should get created with the CHtml::dropDownList function as by default the ID is the same as the name attribute.

@idg :- Thank You , but it is not getting created . explicitly we have to mention it in other attributes

Yii - loading html file data in to drop down list using Jquery - Stack...

jquery drop-down-menu yii
Rectangle 27 0

Yii::app()->clientScript->registerScript('info-popup-script', "
   jQuery(document).on('click','.info-link', function(){.....
   .....
", CClientScript::POS_END);

thank you, it works. But could you explain (or some docs) why the second way is better than the 1st approach that i tried originally?

php - JQuery link ON binding doesn't work in Yii GridView Pagination -...

php jquery gridview yii binding
Rectangle 27 0

Manquer's solution didn't work (in version 1.1.17), CJuiDatePicker extends from CJuiInputWidget and it has a value property which is used by CHtml::inputField() when rendering the element, overwriting the value field of htmlOptions property.

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'name' => 'publish_date',
    'attribute' => 'publish_date',
    'model'=>$model,
    'options'=> array(
        'dateFormat' =>'yy-mm-dd',
        'defaultDate' => '2014-3-4',
        'altFormat' =>'yy-mm-dd',
        'changeMonth' => true,
        'changeYear' => true,
        'appendText' => 'yyyy-mm-dd',
    ),
    'value' => '2013-3-4',
));

jquery ui - How to put default value in CJuidatepicker in Yii? - Stack...

jquery-ui yii jquery-ui-datepicker zii-widgets yii-widgets