my DIV mod - Adds GUI element to choose whether to add DIVs around images
|
evilc
Joined: 2004-08-01
Posts: 47 |
Posted: Wed, 2008-10-22 14:37
|
|||
|
* Updated for 3.0.3 * There are 3 options: None, One DIV per image, One DIV around all images The $g2ic_class_mode option no longer has any effect after this mod is applied. I am 100% willing for this code to be folded into G2IC, I don't even care about being credited... Modifications: init.php, ~ line 42, after the $g2ic_options['drupal_g2_filter_prefix'] line, ADD: config.php, after $g2ic_class_mode = 'div' line, ADD: // This is an option added by evilC // Options are: 'none', 'single' or 'all' // None = No DIVs around images. // Single = One DIV around each image // All = One DIV around all images $g2ic_div_mode = 'none'; // evilC's DIV mod g2image.php, FIND:
// Alignment selection
$html .= ' <label for="alignment">' . T_('G2Image Alignment Class') . '</label>' . "\n"
. g2ic_make_html_alignment_select()
. " </fieldset>\n\n";
REPLACE WITH:
// Alignment selection - evilC's DIV mod
$html .= ' <label for="alignment">' . T_('G2Image Alignment Class') . '</label>' . "\n"
. g2ic_make_html_alignment_select()
/*. " </fieldset>\n\n"*/;
// DIV mode selection
$html .= '<br /><br /> <label for="div_mode">' . T_('DIVs around images?') . '</label>' . "\n"
. g2ic_make_html_div_select()
. " </fieldset>\n\n";
FIND: /** * Creates the alignment selection HTML Add BEFORE:
/**
* Creates the DIV selection HTML - evilC's DIV mod
*
* @return string $html The DIV selection HTML
*/
function g2ic_make_html_div_select(){
GLOBAL $g2ic_options;
// array for output
$div_options = array('none' => array('text' => T_('None')),
'single' => array('text' => T_('One DIV per image')),
'all' => array('text' => T_('One DIV around all images')));
if ($g2ic_options['custom_class_1'] != 'not_used'){
$div_options = array_merge($div_options, array($g2ic_options['custom_class_1'] => array('text' => $g2ic_options['custom_class_1'])));
}
if ($g2ic_options['custom_class_2'] != 'not_used'){
$div_options = array_merge($div_options, array($g2ic_options['custom_class_2'] => array('text' => $g2ic_options['custom_class_2'])));
}
if ($g2ic_options['custom_class_3'] != 'not_used'){
$div_options = array_merge($div_options, array($g2ic_options['custom_class_3'] => array('text' => $g2ic_options['custom_class_3'])));
}
if ($g2ic_options['custom_class_4'] != 'not_used'){
$div_options = array_merge($div_options, array($g2ic_options['custom_class_4'] => array('text' => $g2ic_options['custom_class_4'])));
}
$div_options[$g2ic_options['div_mode']]['selected'] = TRUE;
$html = g2ic_make_html_select('div_mode',$div_options);
return $html;
}
In functions.js, around line 214, FIND: Then on the next line, FIND: if (firstpic == 0){ // if original set value (0), and we are in this loop, must be first pic.
firstpic = 1; // set firstpic to something that evals TRUE
} else if (firstpic == 1){ // we are in here again and firstpic is already set, this is the second pic
firstpic = null; // Set firstpic to something that evals FALSE and is not 0
}
And now the big one: This is a big CASE statement. You need to make the same changes to the following cases: At the start of each of these is an IF statement like:
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
Comment it out, and replace each one with:
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
}
=========================================================================================== Then, at the end of each of these cases is an IF statement like:
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
Again, comment it out and replace it with:
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div>';
}
}
=========================================================================================== Also, in the middle of each of these cases is an IF statement like:
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
Comment that out and replace it with:
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
I have not modified the WP or Drupal items at the end, I think it is the same change, but I didn't bother to look TBH. ============================================== QUICK AND EASY PASTE FOR FUNCTIONS.JS CODE ============================================== //let's generate HTML code according to selected insert option
var firstpic = 0; // used to detect first pic
for (var i=0;i<loop;i++) {
if ((loop == 1) || obj.images[i].checked) {
if (firstpic == 0){ // if original set value (0), and we are in this loop, must be first pic.
firstpic = 1; // set firstpic to something that evals TRUE
} else if (firstpic == 1){ // we are in here again and firstpic is already set, this is the second pic
firstpic = null; // Set firstpic to something that evals FALSE and is not 0
}
imgtitle = ' title="' + item_summary[i] + '"';
imgalt = ' alt="' + item_title[i] + '"';
thumbw[i] = 'width="' + thumbw[i] + '" ';
thumbh[i] = 'height="' + thumbh[i] + '" ';
switch(obj.imginsert.value){
case 'thumbnail_image':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic ) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
htmlCode += '<a href="' + image_url[i]
+ '"><img src="'+ thumbnail_src[i] + '" ' + thumbw[i]
+ ' ' + thumbh[i] + imgalt + imgtitle;
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
htmlCode += ' /></a>';
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div></div>';
}
}
break;
case 'thumbnail_album':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
htmlCode += '<a href="' + obj.album_url.value
+ '"><img src="'+thumbnail_src[i] + '" ' + thumbw[i]
+ ' ' + thumbh[i] + imgalt + imgtitle;
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
htmlCode += ' /></a>';
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div></div>';
}
}
break;
case 'thumbnail_lightbox':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic ) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
$enable_highslide=1;
if ($enable_highslide){ // evilC's HighSlide Mod
htmlCode += '<a href="' + fullsize_img[i] + '" class="highslide" onclick="return hs.expand(this)';
htmlCode += '" title="'
+ item_description[i] + '" ><img src="'
+ thumbnail_src[i] + '" ' + thumbw[i]
+ ' ' + thumbh[i] + 'alt="Highslide JS"' + imgtitle;
} else { // Original Code
htmlCode += '<a href="' + fullsize_img[i] + '" rel="lightbox';
if (obj.lightbox_group.value)
htmlCode += '[' + obj.lightbox_group.value + ']';
htmlCode += '" title="'
+ item_description[i] + '" ><img src="'
+ thumbnail_src[i] + '" ' + thumbw[i]
+ ' ' + thumbh[i] + imgalt + imgtitle;
}
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
htmlCode += ' /></a>';
/* evilC DIV mod
if (i == loop-1){
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div></div>';
}
}
break;
case 'fullsize_image':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
htmlCode += '<a href="' + image_url[i]
+ '"><img src="'+fullsize_img[i] + '" ' + imgalt + imgtitle;
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
htmlCode += ' /></a>';
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div></div>';
}
}
break;
case 'thumbnail_custom_url':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
htmlCode += '<a href="' + obj.custom_url.value
+ '"><img src="'+thumbnail_src[i] + '" ' + thumbw[i]
+ ' ' + thumbh[i] + imgalt + imgtitle;
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
htmlCode += ' /></a>';
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div></div>';
}
}
break;
case 'thumbnail_only':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
htmlCode += '<img src="'+thumbnail_src[i] + '" ' + thumbw[i]
+ ' ' + thumbh[i] + imgalt + imgtitle;
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
htmlCode += ' />';
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div></div>';
}
}
break;
case 'fullsize_only':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic) || (obj.div_mode.value == 'single') ){
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
htmlCode += '<img src="'+fullsize_img[i] + '" ' + imgalt + imgtitle;
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
if ((obj.alignment.value != 'none') && (obj.div_mode.value == 'none')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
htmlCode += ' />';
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
htmlCode += '</div></div>';
}
}
break;
case 'divx_video':
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && firstpic) || (obj.div_mode.value == 'single') ){
//htmlCode += '<div class="' + obj.alignment.value + '"><div>';
htmlCode += '<div class="' + obj.alignment.value + '"><div>';
}
}
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'img')){
htmlCode += ' class="' + obj.alignment.value + '"';
}
*/
/*
htmlCode += '<object codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab" classid="clsid:67dabfbf-d0ab-41fa-9c46-cc0f21721616" height="308" width="360">';
htmlCode += '<param name="src" value="' + fullsize_img[i] + '" />';
htmlCode += '<param name="mode" value="mini" /><param name="bufferingmode" value="null" /><param name="autoplay" value="false" /><param name="name" value="test_divx.divx" />';
htmlCode += '<embed autoplay="false" bufferingmode="null" mode="mini" type="video/divx" src="' + fullsize_img[i] + '" name="test_divx.divx" height="308" width="360"></embed>';
htmlCode += '</object>';
*/
htmlCode += '<object codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab" classid="clsid:67dabfbf-d0ab-41fa-9c46-cc0f21721616" height="308" width="360">';
htmlCode += '<param name="src" value="' + fullsize_img[i] + '" />';
htmlCode += '<param name="mode" value="mini" /><param name="bufferingmode" value="null" /><param name="autoplay" value="false" /><param name="name" value="test_divx.divx" />';
htmlCode += '<embed autoplay="false" bufferingmode="null" mode="mini" type="video/divx" src="' + fullsize_img[i] + '" name="test_divx.divx" height="308" width="360"></embed>';
htmlCode += '</object>';
/* evilC DIV mod
if ((obj.alignment.value != 'none') && (obj.class_mode.value == 'div')){
htmlCode += '</div>';
}
*/
if ((obj.div_mode.value != 'none')){
if ( (obj.div_mode.value == 'all' && i==loop-1) || (obj.div_mode.value == 'single') ){
//htmlCode += '</div></div>';
htmlCode += '</div></div>';
}
}
break;
case 'wpg2_image':
if (obj.alignment.value != 'none'){
htmlCode += '<div class="' + obj.alignment.value + '">';
}
if(window.tinyMCE) {
htmlCode += '<img src="' + thumbnail_src[i]
+ '" alt="' + image_id[i];
if (obj.wpg2_tag_size.value)
htmlCode += '|' + obj.wpg2_tag_size.value;
htmlCode += '" title="' + image_id[i];
if (obj.wpg2_tag_size.value)
htmlCode += '|' + obj.wpg2_tag_size.value;
htmlCode += '" ' + thumbw[i] + thumbh[i]
+ 'class="mceItem" id="mce_plugin_g2image_wpg2" />';
}
else {
htmlCode += '<wpg2>' + image_id[i];
if (obj.wpg2_tag_size.value)
htmlCode += '|' + obj.wpg2_tag_size.value;
htmlCode += '</wpg2>';
}
if (obj.alignment.value != 'none'){
htmlCode += '</div>';
}
break;
case 'drupal_g2_filter':
htmlCode += '[' + obj.drupal_filter_prefix.value + ':' + obj.image_id[i].value;
if (obj.alignment.value != 'none'){
htmlCode += ' class=' + obj.alignment.value;
}
if (obj.drupal_exactsize.value)
htmlCode += ' exactsize=' + obj.drupal_exactsize.value;
htmlCode += ']';
break;
case 'link_image':
htmlCode += '<a href="' + image_url[i] + '">' + obj.link_text.value + '</a>';
break;
case 'link_album':
htmlCode += '<a href="' + obj.album_url.value + '">' + obj.link_text.value + '</a>';
break;
default:
htmlCode += 'Error';
break;
}
}
}
insertHtml(htmlCode,obj);
}
BE AWARE that the pre-edited code for functions.js above also contains my HighSlide Mod to use the HighSlide lightbox, it is disabled by default, enable it by changing $enable_highslide=0 to $enable_highslide=1 in the pre-edited code. enjoy Peace, out.
|
||||
Posts: 47
Bug fix added 9th Nov 08 to code in first post:
If you picked some images with a box around all, but the first image you picked was not the first in the list, it would not open the DIV. I mistakenly thought it would start the loop on the first image it had to insert, just as it ends it on the last one it has to insert. Not so. So I added some code at the start of the for loop to set a variable to 1 for only the loop of the first image.