I have a Galleriffic slideshow on my page. Right now the "large" image links to the next image in the slideshow. How can I make it link to an external file instead?
First, you have to add a hidden div or span tag to your unordered list:
<li>
<a class="thumb" href="/imageurl/image.gif">imageititle</a>
<span id="project-path" style="display:none;">example_path</span>
</li>
Then, add this code to your galleriffic.js file. You are grabbing the path from the span element:
addImage: function(listItem, thumbExists, insert, position) {
var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
var $aThumb = $li.find('a.thumb');
** var $path = $li.find('#project-path');
** var projectPath = $path.text();
var slideUrl = $aThumb.attr('href');
var title = $aThumb.attr('title');
var $caption = $li.find('.caption').remove();
var hash = $aThumb.attr('name');
Then, you add the value to the image variable:
var imageData = {
** projectPath:projectPath,
title:title,
slideUrl:slideUrl,
caption:$caption,
hash:hash,
gallery:this,
index:position
};
Now tell the gallery to change the link w/ new path on the full-size gallery images:
// Construct new hidden span for the image
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="/project/'+imageData.projectPath+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
And comment out the gallery click action here, so that your user can just use the normal link wrapping the image:
newSlide.find('a')
.append(imageData.image)
//.click(function(e) {
//gallery.clickHandler(e, this);
//})
;
yep - at http://prestondentalgroup.com.au/downloads.html
The hyperlinks on the slide images allow viewer to open/save a PDF doc.
Works nicely (once I deciphered how to write example_path and to substitute /project/ with the URL of the PDF file (including subfolders).
So to link to readme.pdf from the site's images/downloads/ folder,
example_path becomes images/downloads/readme.pdf
and
/project/ becomes http:/prestondentalgroup.com.au/
Related
I've retrieved my pdf from my odata service call. However when I insert to html content using iframe tag, it display a blank page.
I tried below code. When i hardcode url with drive.google, my app able to show the pdf page but when i remove the hard coded value, my html content not able to render the pdf page. Any inputs on this?
// var pdfURL = "https://drive.google.com/viewerng/viewer?
//url=https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-0010-82c7-
//eda71af511fa.pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true";
var pdfURL = "https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-
0010-82c7-eda71af511fa.pdf";
var oHtmlChange = new sap.ui.core.HTML({
content: "<iframe src=" + pdfURL + " width='800' height='800'></iframe>"
});
poFormPanel.addContent(oHtmlChange);
Try to set the following content property value:
...
content: "<embed src='https://drive.google.com/viewerng/viewer?embedded=true&url=https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-0010-82c7-eda71af511fa.pdf' width='800' height='800'>"
...
Here is a working example.
The Tags in Bootstrap Tags Input is overflowing the container.
So I would like to set max-width for the Tag or is there any way to stop overflowing the Tags in Bootstrap Tags Input ?
For Reference please visit this web site.
Just Add An Bootstrap-Tagsinput Event:
$('#Id').on('itemAdded', function(obj) {
var tagsinputWidth = $('#Id').parent().find('.bootstrap-tagsinput').width();// Width of Bootstrap Tags Input.
var tagWidth = $('#Id').parent().find('.bootstrap-tagsinput span.tag').last().width();// To get the Width of individual Tag.
if(tagWidth > tagsinputWidth) {
//If Width of the Tag is more than the width of Container then we crop text of the Tag
var tagsText = obj.item.value;// To Get Tags Value
var res = tagsText.substr(0, 5); // Here I'm displaying only first 5 Characters.(You can give any number)
$('#Id').parent().find('.bootstrap-tagsinput span.tag').last().html(res+"..." +'<span data-role="remove"></span>');
}
});
But the Problem is, User can't see the total text of tag that he/she added. So we can place "Title" for the Tag
We need to customize in bootstrap-tagsinput.js at line Number 127.
var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '" title="'+htmlEncode(itemText)+'">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
So, Now the User Can visible the Text when he/she mouse-over on that particular Tag.
I'm currently writing a site using Sitefinity CMS. Can someone please explain how to get the current dynamic content item from server side code on page_load?
I have written a user control to display a custom gallery of sliding images. There are multiple content types in my dynamic module. The user control will sit as part of the masterpage template rather than on every page. On each page load I would like to fetch the current dynamiccontent item that is associated with the page and examine whether it has a property with the name 'Gallery'. If so I would then extract the images and render them via the usercontrol.
Thanks,
Brian.
I'm assuming your images are related content. This gets every published content item of your type.
var dynamicModuleManager = DynamicModuleManager.GetManager();
var moduleType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.YOURTYPEHERE");
var dcItems = dynamicModuleManager.GetDataItems(moduleType)
.Where(l => l.Status == ContentLifecycleStatus.Master);
foreach (var dcItem in dcItems)
{
//pass the dynamic content item to a model constructor or populate here, then
// get your image this way:
var image = dcItem.GetRelatedItems<Image>("Images").SingleOrDefault();
if (image != null)
{
ImageUrl = image.MediaUrl;
}
}
Due to some restrictions with a CMS I am developing for I cannot create the intended markup for a proper accordion with Bootstrap 3 on page load, however I can get it very close.
The issue I am having is that the initial
panel group id (accordion1), I cannot assign the proper data-parent="accordion1" to the data-toggle="collapse" element in the panel. I am attempting to rewrite the data-parent references to the proper accordion ID but it does not have an affect, it is like the collapse binding is already in place and I'm not sure how to get around it.
This is an example of my issue. (id's are the same on page load but I try to rewrite them with a script on dom-ready)
$(document).ready(function() {
$('.panel-group').each(function() {
var $t = $(this);
var id = "#" + $t.attr("id");
$t.find('[data-parent]').attr("data-parent", id);
});
});
This function fixes the markup as BS3 wants but the functionality is still broken.
http://plnkr.co/CTBekXVyzU0xjzlud2N1
I ended up figuring out that the error was my own. Multiple accordions is not an issue. Where I went wrong was in the markup. The error in my ways weas that the data-toggle="collapse" element's href="#collapse-0" for example was duplicated for both accordions. They must be unique. The CMS restriction still existed on the data-parent however. This caused me to redo my script (which does work now for multiple accordions)
$('.panel-group').each(function(){
//setup each panel group with individual id's appropriately
var $t = $(this);
var id = "#" + $t.attr('id');
var randomInt = $t.attr('id').split('_')[1]; //extract
$t.find('.panel').each(function(){
//set the proper collapsable targets for each
var $t = $(this);
var $dataParent = $t.find('[data-parent]');
var href = $dataParent.attr('href');
//set the collapse target
var $targetId = $dataParent.attr('href', injectRandom(href, randomInt));
var targetId = $targetId.attr('href').split('#')[1];
//set the random id's
$dataParent.attr('data-parent', id);
//set the collapse container
$dataParent.parents('.panel-heading:first').next().attr('id', targetId);
});
//open first pane
$t.find('[data-toggle]:first').trigger('click');
});
I will update the plunkr
I have a simple form and body field. when user upload an attachment I want to remove any attachment already in the body field of the document. how can I do this in my save button.
I have tried to set the properites on the fileUpload control to always change the filename to tha same name but this does not replace the file, instead it adds a new file and add a new sequential number to it
<xp:fileUpload id="fileUpload1" value="#{userdoc.Body}" filename="profile" seUploadname="false"></xp:fileUpload>
I have also tried to loop all embedded attachments in body field before before save, and all attachments are then removed, but my new attachment is not added.
A little late, but in case anyone gets here just as I did through Google...
There's also another option: a NotesXSPDocument.getAttachmentList("rtitem") returns a list of attachments in the document. Each entry is of type DominoDocument.AttachmentValueHolder which has a getState() property that returns if a file was already in the document or just added. To remove the file that was already in the document you could add this SSJS code to a save button (assuming "files" is the name of the richtext item holding the files):
var attList = docFile.getAttachmentList("files");
for(var i=0; i<attList.size(); i++) {
var att = attList.get(i);
if (att.getState()==0) { //STATE_INDOCUMENT: this is the 'old' file: remove it
docFile.removeAttachment("files", att.getName() );
} else if (att.getState()==1) { //STATE_ADDED: this is the new file
//leave it
}
}
This can be done by removing all attachments first (use the removeAllAttachments function from NotesXSPDocument object) and then attach the uploaded file manually to the richtext item.
This SSJS code has to be added to beforeRenderResponse-event of your XPage / Custom Control:
var con = facesContext.getExternalContext();
var request:com.sun.faces.context.MyHttpServletRequestWrapper = con.getRequest();
var map:java.util.Map = request.getParameterMap();
var fileDataName = getClientId('fileUpload1') ;
var fileData:com.ibm.xsp.http.UploadedFile = map.get( fileDataName );
if( fileData == null ){
return;
}
var tempFile:java.io.File = fileData.getServerFile();
var correctedFile = new java.io.File( tempFile.getParentFile().getAbsolutePath() +
java.io.File.separator + fileData.getClientFileName() );
var success = tempFile.renameTo(correctedFile);
try{
document1.removeAllAttachments("Body");
}catch(e){}
var rtFiles:NotesRichTextItem = null;
if(!(document1.getDocument().hasItem("Body"))){
rtFiles = document1.getDocument().createRichTextItem("Body")
}else{
rtFiles = document1.getDocument().getFirstItem("Body");
}
rtFiles.embedObject(lotus.domino.local.EmbeddedObject.EMBED_ATTACHMENT, "",
correctedFile.getAbsolutePath(), null);
correctedFile.renameTo(tempFile);
document1.save();
The richtext item where the files are stored is "Body", the name of the datasource is "document1". The Fileupload control is "fileUpload1".
There are two limitations:
You cannot use this with a save button, you have to use a normal button / link which makes a full refresh (see what Serdar Basegmez wrote above)
You have to refresh the page after a upload once again, otherwise you will not see the uploaded file in a file download conrol (maybe a partial refresh to this control may work).
EDIT:
Sorry, my fault: You can use this code above in a submit button that saves the document. Then you don't have to refresh the page manually!