I'm building some website with image gallery.
There is a normal colorbox start up script
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
It starts when I press on hyperlink covering img tag.
But I also have some img tags, without hyperlinks fitting them. And in that way default power up script is not working.
But I have different one which works partially .
$('.colorbox').click(function() {
$(this).colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current},
$s_total[$lid]: {total}', maxWidth: 960,
maxHeight: 640, scalePhotos: true,
href: $(this).attr('src')});
});
This one powers up both img tags inside hyperlinks and img tags without hyperlinks.
And now the problem. In this way there are no arrows and info about prev, next image, and number of total images.
Is there any way out of my problem ?
Again I repeat, I have 2 types of pictures in my database.
img tags put into hyperlinks ( default colorbox way )
img tags without hyperlinks but with a colorbox class ( strange way )
Any way to combine these 2 types under one powering up normal working script ?
You should be able to do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
$('img.colorbox').colorbox({href:function(){return $(this).src; }});
You could also do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5', current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}', href:
function(){
return this.src || this.href;
}});
... how about this:
1 - group ALL images by some class selector
2 - use the onLoad callback to check for and set the href value for images that are not wrapped by a hyperlink
Related
I am using fancy box to open various edit functions in an in line div. I use ajax to get the div contents, move it into the div, and open the div in Fancybox. Mostly works great. Some edit blocks have the ckeditor in them and that loads fine and mostly works... but the ckeditor popup/overlays (like paste from word, the color selectors or image tools) are opening underneath the fancybox window. Maybe a z-index issue, but not sure how to fix it:
Fancy box code is below:
function openEditBlock() {
$.fancybox.open({
src : '#editBlock',
type : 'inline',
touch: false
});
}
CK Editor Code below:
var editor1 = CKEDITOR.replace('editor1_content',
{
extraPlugins: 'stylesheetparser', // load the plugin
contentsCss: '../css/editor_cmsPages.css', // load custom stylesheet
stylesSet: [], // Do not load the default Styles configuration.
height: '480px',
width: '780px',
});
CKFinder.setupCKEditor(editor1, 'wysfind/' ) ;
fancybox elements have z-index values from 99992 to 99995; but 1) ckeditor places dialog elements outside the content, as last children of <body> and 2) uses quite low starting values for z-index, for example, color selector has 10006 by default.
Luckily, ckeditor allows to configure z-indexes, locate config.js file and change value of baseFloatZIndex to smth like 100001 (see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-baseFloatZIndex)
I want to be able to set the title tag to the final image in ckeditor using image2 plugin. When I use the image2 plugin the title tag disapears.
I have a fully operational ckeditor on my page, but would like to have a title tag that is automatically set when image is inserted to the alt given in the image2 dialog. I searched for hours for a solution but noone seems to have the same problem, so i decided to ask if anyone knows a solution for it.
I have tried using the CKEDITOR.replace method to change it on instanceReady:
CKEDITOR.replace('element_id',{
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
img: function( el ) {
el.attributes.title = el.attributes.alt;
}
}
});
}
}
});
but that didn't work..
tried this answer https://stackoverflow.com/a/34330124
that didn't work either
I have config.extraAllowedContent set to '*(*);*{*}' in config.js for ckeditor that should allow all tags and attributes.
Do as https://stackoverflow.com/a/34330124 and maybe you have to tweak some more in image2
plugin.js but after that you have to clear cahce for the browser beacause otherwise it'll never update.
I try to edit my images in the tinymce editor,
I already have an image into it, i try to edit the path of this image to change it dinamically with :
tinymce.activeEditor.selection.getNode().src = '/my/path/'
and it works, the image is edited but when i get the html content of my editor, the src still is the old image.
is there an other way to change the source of the image?
there's an easy way to do this, here take a look :
Create your custom file browser using file_browser_callback : myFileBrowser, in your tinymce.init.
Then in your callback function
function myFileBrowser(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open(
{
file: './test.html',
title: 'My File Browser',
width: 420, // Your dimensions may differ - toy around with them!
height: 400,
resizable: 'yes',
close_previous: 'no',
},
{
window: win,
input: field_name,
},
);
return false;
}
by doing this you tell tiny mce to open a new popup wich is the file 'test.html', and you send to your popup two parameters
window : win, input : field_name.
Then in your test.html you can get those parameters like this :
var args = top.tinymce.activeEditor.windowManager.getParams();
this will give you an object with your parameters and value. you can now use a little jquery or whatever you want to replace the field of your image value with the path of your new image. and then close your popup.
Hope i helped you.
I have a question about when mouse over a picture from a slider show, the sound (which is very short, just like a bing) will play. In normal case, I know how to use html, css and javascript to do it. I have a sound example here: https://freesound.org/people/Timbre/sounds/232210/
and let's say, the class in Drupal page.tpl.php is called picture. As I am new to Drupal, how should I make this function work by only using javascript or jquery? Any comments?
For Drupal you should add your scripts with drupal_add_js(). You can add either a file or inline js and set a number of options such as if it should appear on every page and if it should be added to the footer or header and if it requires jQuery.
You could create a js file with something like this inside:
jQuery(document).ready(function($) {
var mySound = document.createElement('audio');
mySound.setAttribute('src', '/path/to/my/sound.mp3');
//play the sound when the visitor moves the mouse over
//an element with the class 'picture'.
$('.picture').mouseover(function() {
mySound.play();
});
});
Then in your theme or module, you could use hook_page_alter to add your js:
drupal_add_js(
'/path/to/js/script.js',
array(
'type' => 'file',
'scope' => 'footer',
'group' => JS_THEME, //or JS_DEFAULT if module
'every_page' => false,
'requires_jquery' => true,
)
);
You could wrap that in some sort of if statement to only load it on the page(s) you need it.
Hope that helps!
I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});
try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....
You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>
You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.